字体图标介绍
网页中图片有很多优点，但也有很多缺点，会增加文件的大小以及增加http请求。这时候就需要用的字体图标（iconfont）。字体图标的优点，可以跟图片一样改变透明度、旋转等，本质上是文字，可以改变颜色，产生阴影等；本身体积小；几乎支持所有浏览器。移动端设备必备。
项目中字体图标使用流程
1、UI人员设计字体图标效果图（svg）
2、前端人员上传生成兼容性字体文件包
3、前端人员下载兼容字体文件包到本地
4、把字体文件包引入到HTML页面中
生成字体文件包方法
上传文件到专门的网站，生成之后下载字体文件包
icomoon字库 网站：http://icomoon.io （推荐）
阿里icon font字库 网站：http://www.iconfont.cn
HTML页面使用字体图标
1、在样式中申明字体，解压下载的字体压缩包，把fonts文件夹复制到项目中，然后打开压缩包中style.css文件中，里面有一段字体文件申明。
1 @font-face { 2 font-family: 'icomoon'; 3 src: url('fonts/icomoon.eot?tuemkd'); 4 src: url('fonts/icomoon.eot?tuemkd#iefix') format('embedded-opentype'), 5 url('fonts/icomoon.ttf?tuemkd') format('truetype'), 6 url('fonts/icomoon.woff?tuemkd') format('woff'), 7 url('fonts/icomoon.svg?tuemkd#icomoon') format('svg'); 8 font-weight: normal; 9 font-style: normal; 10 }
2、给盒子使用字体
1 span { 2 font-family: "icomoon"; 3 }
3、盒子里面添加结构
1 span::before { 2 content: "\e900"; 3 } 4 5 或者 6 <span></span>
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 @font-face { 8 font-family: 'icomoon'; 9 src: url('fonts/icomoon.eot?tuemkd'); 10 src: url('fonts/icomoon.eot?tuemkd#iefix') format('embedded-opentype'), 11 url('fonts/icomoon.ttf?tuemkd') format('truetype'), 12 url('fonts/icomoon.woff?tuemkd') format('woff'), 13 url('fonts/icomoon.svg?tuemkd#icomoon') format('svg'); 14 font-weight: normal; 15 font-style: normal; 16 } 17 span { 18 font-family: "icomoon"; 19 font-size: 100px; 20 color: pink; 21 } 22 span::before { 23 content: "\e900"; 24 } 25 </style> 26 </head> 27 <body> 28 <span></span> 29 </body> 30 </html>
效果图
或者使用 span标签中间是复制demo中的内容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 @font-face { 8 font-family: 'icomoon'; 9 src: url('fonts/icomoon.eot?tuemkd'); 10 src: url('fonts/icomoon.eot?tuemkd#iefix') format('embedded-opentype'), 11 url('fonts/icomoon.ttf?tuemkd') format('truetype'), 12 url('fonts/icomoon.woff?tuemkd') format('woff'), 13 url('fonts/icomoon.svg?tuemkd#icomoon') format('svg'); 14 font-weight: normal; 15 font-style: normal; 16 } 17 p { 18 font-family: "icomoon"; 19 font-size: 100px; 20 color: pink; 21 } 22 23 </style> 24 </head> 25 <body> 26 <p></p> 27 </body> 28 </html>
效果图
追加新图标到原来的库里
原来字体压缩包中，有一份json文件。将此文件上传到icomoon中，重新选择需要新添加的图标，然后打包新的字体包，并下载。
