vue+element-ui项目内使用阿里图标库

项目内可能会经常涉及到图标使用的问题，我比较常用的是阿里的图标库。

要使用图标的话，需要先对图标进行下载，下面是下载图标库及使用的步骤：

获取图标

1.需要进入到阿里图标矢量库官网，点击我的项目：

2.点击新建项目：

3.选择下方选中的是你图标class的前缀 为  icon  ，这里的两个都取的默认。

4.新建项目后往购物车内添加图标，将你需要的添加完成后，打开购物车将其添加到项目，选中项目，确认即可

5.就可以看你添加的七个图标，然后点击 下载到本地：

 

这样就可以获取到你需要的图标。

 

使用图标

下载文件里面文件很多，但是主要用到的就这几个文件

其他的删了就行，留下几个新建fonts文件夹，将这几个文件添加进fonts文件夹。

添加fonts

打开vue项目，将其添加到  src目录下的 assets 文件夹下：

在fonts下只留选中的即可。

导入

然后需要在 main.js内导入 iconfont.css 文件，添加下面这条语句即可。

使用

导入完成后，进行在你需要图标的位置进行使用：

通过class属性设置类名（ iconfont icon-user ，这里以user为例）即可实现图标的导入。

类名内的 iconfont 是不能少的，这个是你刚才设置的 Font Family ，可以从iconfont.css内看到设置的类名。

 

最后的展示图标为下图：

新增图标话，按上述步骤下载fonts并更换fonts内的文件即可。

 

最后是一个小技巧：

这个html文件内有图标类名展示，方便图标查找：