前言

在我们的日常开发过程中，会使用到很多小的图标，怎么可以借助已有的图标库，快速开发呢？阿里爸爸的iconfont成为了首选。一方面，目前我的开发所需要的图标基本上都是有的，而且还支持自定义图标，这是不是很贴心啊。另一方方面，也是因为他开源免费。

今天就来详细说一下阿里的图标库提供的三种使用方式

准备工作 首先准备一个账号，登陆后，创建一个项目，选择自己喜欢的图标加入到该项目中，具体细节就不再这里说了，我们主要说一下在项目中如何使用的

unicode使用方法

首先我们来到了如下的页面

• 第一步，选择此次导入项目的方式Unicode
• 第二步，点击在线链接生成导入项目的代码
• 第三步，将生成的代码复制导入项目中在导入项目的时候我们可以自定义一个scss文件，粘贴后，我们还需要将定义的文件带入main.js中，让其生效。 导入后我们就可以在项目中使用了
• 第四步，使用图标

 <i class="iconfont" >&#xe612;</i>
 <i class="iconfont" >&#xe601;</i>
 <i class="iconfont" >&#xe614;</i>

标签中包裹的unicode编码每个图标都有，想要那个图标就把相应的unicode编码放入标签就可以在项目中看到图标了

font class使用方法

和第一种类似

• 第一步，选择导入项目的方式为font class
• 第二步，复制生成的代码
• 第三步，将复制的代码粘贴到项目中 不同于第一种的地方在于，这次生成的代码是一个url链接，我们有两种方式进行导入

1. • 第一，在vue项目中，我们可以在index.html文件中导入，导入一次就可以 在导入的时候需要注意我们需要在复制的代码前加上https:
2. • 第二，我们可以定义一个index.scss文件，通过import的方式导入，导入后将scss文件带入main.js中，也是可以导入成功的

• 第四步，就是使用图标了

<i class="iconfont icon-a-danjucaozuofasongduanxin"></i>
<i class="iconfont icon-a-danjucaozuodanjuzaixian"></i>

icon-后边的就是文件名，也就是上面图片箭头三所指的图标名。由此，我们就可以在项目中看到我们图标了

symbol使用方法

这个方法是目前主流的方法，将图标以svg的形式展示。

• 第一步，选择我们要导入的类型symbol
• 第二步，复制代码
• 第三步，在index.html文件导入

因为是js文件，我们需要通过script标签导入，导入的时候我还是不要忘了在复制的代码前加上https:

• 第四步，使用标签

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-gongwen"></use>
</svg>

我们把需要的图标代码复制完成后，需要在前面加上#后才可以使用哦。一起看看效果吧

总结

三种方式都可以很好地使用iconfont图标，细心的小伙伴就会发现，第三种导入的方式，可以显示多彩的图标，而第一种和第二种图标只能显示默认的黑色。

自己目前也是在学习中，写文章的能力还有很大很大的进步，希望各位小伙伴可以指正。