使用阿里的字体库—iconfont

由于之前的项目需要，所以使用的bootstrap的字体图标，但是项目越往后，越发现bootstrap的字体图标数量太少。之前很早就听说阿里的字体库，可以点击这里。本地尝试了一下，发现使用非常的简单。

• 首先，我们了解几个使用字体图标得好处：
  1.如果设计是按照这个库里的图标来设计网页的话，那前端就能减少很大的切图压力；
  2.字体图标可以通过设置font-size来改变大小，color改变颜色，font-weight改变粗细；
  3.相对于图片，总的文件大小会小很多；

• 其次，我们来看一下阿里的图标库有哪些字体图标：

pic1.jpg

• 我们该如何使用呢？

pic2.jpg

pic3.jpg

1.在网站中选择想要的字体图标，点击加入购物车（其实是完全免费的，不要被购物车图标吓着~），然后在顶部的购物车列表中批量下载到本地。
下载后，我们会得到这样一个文件夹：

pic4.jpg

2. 在项目中引入图pic4中红色箭头标注的地方；
   3.在自己的html中引入iconfont.css，然后在标签上指定iconfont的class，修改标签的innerText就可以实现成功调用，具体看代码：

    
    
    
    


    
    
    
    

4.innerText具体的值，如''可以参考下载文件后的demo.html中：

pic6.jpg

5.实现效果：

pic5.jpg

图标得大小、颜色、粗细都是可以修改的，就像控制字体样式一样，动手尝试吧~