iconfont 怎么在项目中使用图标库

iconfont是不少设计以及先后端人员编写页面时常常用到的网站，阿里不只为咱们提供了免费的图标库，而且有一套完整的图标库体系。不少初学者只知道从图标库中下载图标放入项目中，但在实际项目应用中，过多的图片会致使页面加载速度的变慢以及不少其余问题。今天我介绍一下如何使用Iconfont创建项目并使用图标。

 

---

 

若是要本身新建项目，首先选择图标添加入库

 

以后，点击右上角的

右侧会出现你当前已添加入库的图标栏，如图

 点击添加至项目

建立新项目或加入已有项目；

肯定以后，进入个人项目页面

 图中每一个图标所对应的代码就是项目组的图标代码；

点击‘’暂无代码，点今生成‘’

会出现Unicode Font class Symbol 代码

如图：

 

如今能够打开你准备添加图标的项目了：

1.将Unicode中的代码复制到你的css文件中；

2.将Font class中的代码连接粘贴到浏览器中打开，复制其中这一段代码（即iconfont的类样式）：

将这段代码复制到你项目的css文件中

3.在页面中引用这个css，给你须要使用图标的地方写一个任意元素，如图：

元素类名为：iconfont   标签中的代码即为你想使用的图标代码

刷新后页面就会出现相对应的图标了：

须要注意的是，图标是至关于一个文字，若是要调整大小不是改变宽高，而是字号font-size，一样颜色、居中之类的均可已经过调整文字样式调整。

例如我给当前的图表添加一组样式：

获得的效果就如图：

在开发过程当中，由于可能要不断地往项目中添加新图标，每次向项目中添加图标以后切记要从新生成一下Unicode码，把最新的代码覆盖到以前的css中，不然新添加的图标就不会显示。开发结束后，能够把图标源码打包保存到本地，经过读取本地也就不会产生加载慢之类的问题。

 

---

 

Iconfont的功能远远不止这些，感谢阿里给咱们带来了这么多的便利。

 

好啦，此次的分享就到这里，我在工做中不断地进步，也但愿我工做中遇到的问题也能对你们有所帮助。