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

 

    

posted @ 2019-11-26 15:37  ivy_wang  阅读(178)  评论(0编辑  收藏  举报