Iconfont使用手册

Iconfont是阿里巴巴矢量图标库，本文将简单介绍如何快速上手使用Iconfont，自从用上Iconfont后，图片再也不糊了

起因

之前，项目中的logo等图片资源都是UI小姐姐设计好后切给我，然后我将其引入项目中，如下形式：

<img scr="./logo.png" />

但这种方式有一个弊端，就是图片放大后，或者在高分辨率的显示器下面会变得模糊，导致不够清晰，对于一个有高要求高标准的场景而言，显然是不够的，于是团队讨论，决定用上Iconfont，这是一种矢量图片库，由UI小姐姐将图片传到阿里Iconfont网站，然后前端下载并引入即可，非常方便。

下载并使用

登录Iconfont，在我的项目中，共有三种形式，这里我一般选择Font class, 然后点击下载至本地，会得到这样一个文件夹。

将下图中五项copy出来，新建一个myfont文件夹（自定义命名，随便你）

然后，在你的html页面中引入进来

<link rel="stylesheet" href="./myfont/iconfont.css" />

最后，在需要的地方使用即可

<i class="iconfont icon-team"></i>

延伸

Iconfont网站上有很多开源的库，别人已经设计好了，如果公司没有UI设计师，你也可以选择一套自己进行组装，非常自由，当然，矢量库还有，Font Awesome 等，也非常不错，用法嘛，都是大同小异。