学习笔记：字体图标iconfont的使用

前言：有时候做一些页面，图标很多，全都以图片形式加载的话，整个文件体积会变得非常大，不仅会增加额外的http请求，还会有图片放大后失真的问题，在做响应式布局的时候使用图片做图标是非常不友好的，而使用字体图标，以上问题都可迎刃而解。

一、使用字体图标的优势

1、字体图标是矢量图标，可进行无限缩放不失真

2、加载字体图标无需http请求，相较图片加载速度更快

3、字体图标体积更小

4、可通过CSS灵活控制样式，修改大小、颜色等

当然使用字体图标也存在一些问题，如只能渲染成单色，而且使用局限于字体图标库里存在的图标（因为自己制作字体图标是非常耗时的。）。

二、字体图标库

阿里字体图标库：http://www.iconfont.cn/

在阿里图标库里，可以找到非常多各式各样的字体图标，首次登录需要先捆绑账号，支持github及新浪微博两种快捷入口登录。登录后点击图标管理→我的项目进入项目页面

进入页面点击右边紫色的图标新建一个项目，在弹出的页面中填好项目名称及项目描述，然后点击新建即可。

然后就可以去图标库找想要的图标，添加进购物车。

所有想要的图标都找到并添加进购物车后，点击右上角购物车的图标，将购物车里的图标添加至项目

回到我的项目页面，点击下载至本地按钮，这样字体图标的文件就获取到本地了。

三、在项目中使用字体图标

将上面下载的文件解压缩后可以看到以下内容

将所有名为iconfont的文件（即红色方框里的文件）都放到项目的assets目录下，通常资源类的文件都会被放在这里，如图片、引用的css样式等

然后在main.js里引入iconfont的样式文件

接着就能在项目中使用这些字体图标了，注意一点，在引用字体图标的标签内，必须要定义一个iconfont的类名，否则会产生乱码

标签内字体图标的代码去阿里复制代码过来即可，补充好代码就能在页面看到图标啦。

html页面中显示的字体图标

四、修改字体图标样式

通过设置CSS样式可以控制字体图标的颜色、大小、旋转等，实际上就是把字体图标当作文字进行处理。

color：改变图标颜色

font-size：改变图标大小

transfrom:rotate（xx deg）：使图标旋转