字体图标iconfont

　字体图标的作用：

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 然后在继续选择需要用到的图标导出即可