@font-face 字体图标的应用

所谓字体图标，顾名思义就是图标以字体的形式存在，能够利用 font-size、color 对字体图标的大小和颜色进行渲染。将小图标集中放到字体库里，利用css3 @font-face 引用图标，不只有利用图标的集中化管理，也有利于搜索引擎的优化。

图标建议使用 iconfont.cn（阿里巴巴矢量图标库），该网站的一些功能给前端工做提供了不少方便。在该网站的代码应用页面讲解了图标在web端的使用，里面涉及到三种引用方式，这篇文章将着重讲解第二种方式——font-class引用。

1、font-class特色

在 iconfont.cn 里是这样介绍font-class的特色的：

• 兼容性良好，支持ie8+，及全部现代浏览器。
• 相比于unicode语意明确，书写更直观。能够很容易分辨这个icon是什么。
• 由于使用class来定义图标，因此当要替换图标时，只须要修改class里面的unicode引用。
• 不过由于本质上仍是使用的字体，因此多色图标仍是不支持的。

2、font-class使用

一、登陆 iconfont.cn ，方便管理项目。

二、搜索图标名，如“首页”，选择一个图标，点击“添加入库”。如图：

 

三、点击右上角购物车图标，进入已选图库。如图：

四、选择“添加至项目”，若是没有项目就先添加一个项目，而后选择一个项目，点击“肯定”。如图：

五、肯定以后进入个人项目页面，能够看到引用方式默认是Font class, 点击“下载至本地”，将压缩包下载到本地。

六、下载后的文件目录如图：

对于咱们目前来讲，有用的文件只有：

编辑器打开iconfont.css文件：

解释一下这个文件内容：

(1)@font-face 引用四种格式的字体图标文件，目的是为了兼容不一样浏览器；

(2).iconfont 全部图标的公共样式；

(3).icon-shouye “首页”图标的引用类名；

再来看一下html文件是怎么引用图标的：

一目了然，红色框里的就是引用首页这个图标的方法。so，引用图标时，都要有.iconfont这个公共样式类名，再有就是这个图标的引用类名。

浏览器运行html文件，“首页”图标就渲染到了页面上。经过样式更改color、font-size，图标的颜色、大小就会发生变化。如图：

3、编辑图标

鼠标移入图标上，显示4个图标按钮，分别是 添加入库、编辑图标、删除图标、下载图标，点击 编辑图标，进入图标详情弹框：

讲解：(1)调整图标大小

　　　(2)编辑图标名称

　　   (3)编辑图标字符编码（有默认编码）

4、添加图标

往项目里添加新图标的方法和上面说的步骤同样，有几点须要说明一下。

一、将压缩包下载到本地后，只须要把其中的 iconfont.css、.eot、.svg、.ttf、.woff五个文件替换掉以前的文件便可。

二、iconfont.css的内容也能够经过输入连接查看：

点击红字获取新连接，浏览器打开连接，复制新图标代码，再粘贴到iconfont.css文件里到便可。如图：

5、小结

一、编辑图标，调整图标大小至容器的边框，这样是为了当图标字体大小同样时，显示在页面上的图标大小同样。（以前项目的经验：两个图标font-size值同样，显示在页面上却不同大小，后来调整了图标的大小才解决了问题）

二、当图标不少时，为了方便查找图标代码，能够将图标代码按字母表排列。如图：

 

 

欢迎留言~