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