字体图标iconfont

假如想象 提交于 2019-12-05 17:13:26

 字体图标的作用:

1. 可以做出图片一样可以做的事情, 改变透明度, 旋转度,等...
2. 但是本质其实是文字,可以很随意的改变颜色, 产生阴影,透明效果等
3. 本身体积更小,但携带的信息并没有消减
4. 几乎支持所有的浏览器
5. 移动端设备必备良药

 

字体图标使用流程:

1. UI人员设计好字体图标效果图 (svg)
    使用软件 illustrator 或sketch
2. 前端人员上传生成兼容性字体文件包
    https://icomoon.io/
    iconfont.cn
3. 前端人员下载兼容字体文件包到本地
4. 把字体文件包引入到HTML页面中

 

应用:

第一步.在css里面声明字体

@font-face {  /* 电脑中没有的字体,我们需要声明 */
          font-family: 'icomoon';
          src: url('fonts/icomoon.eot?7kkyc2');
          src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
        }

第二步 给盒子使用字体
span {
            font-family: "icomoon"
        }
第三步 给盒子里面添加结构
span::before {
            content: "\e91b"
        }

ps 打开demo.html的文件 选上需要的图标 复制到span标签里面 自行调整样式即可

追加新图标字体
导入之前fonts的select.json 然后在继续选择需要用到的图标导出即可

 

    

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!