字体图标的妙用

什么是字体图标

对于前端的小伙伴来说，字体应该是再熟悉不过的东西了，对于文字我们可以通过css指定文字对应的字体，字号大小，颜色。得益于css3，我们还可以在css中引入服务端字体来实现自定义字体。

而字体图标，顾名思义则是把图标当做字体来使用，通过使用字体图标，我们可以动态改变图标的大小、颜色等一系列字体属性。而且相对于一般的图片，字体图标的大小改变并不会使图像变的模糊。

接触过bootstrap的同学应该了解过，bootstrap里面就预设了很多自定义图标，我们只要在元素上指定对应的class，就可以显示出图标，接下来，我们就来一步步了解这些操作是怎么实现的。

字体图标和字体的关系

事实上，字体图标其实就是自定义字体，在计算机系统中每个字符都有一个对应的unicode编码，而每一个字符在操作系统中就是一个矢量图形，例如“敏”这个字，对应的Unicode编码就是\u654f，而字体文件的作用，就是用来规定这些编码对应什么样的图形。unicode字符集里面，E000 至 F8FF属于用户自定义区域。用户可以在字体文件里面定义这些字符的对应的形状，通过项目引入加载去找到自定义字符。而字体图标的实现原理就是在这个自定义区域中添加一系列的图标，我们通过指定对应的Unicode编码来显示图片。

妙用之处

一般来说，字体图标通过class样式给出两个类，一个是图标库的声明样式，一个是具体的图标样式。但是在某些情况下，无法这样去添加元素，那么可以这样用。首先在父元素上，class样式中，声明图标库样式，然后将具体的图标样式通过&#x转义成html代码。

如：图标css文件中对应的Unicode编码是：\e63f，那么可以直接在html中写：，注意后面的分号。至于怎么样去查看图标的Unicode编码，这个就比较基础了。各显神通吧。