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

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

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

获取图标

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

2.点击新建项目：

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

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

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

 

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

 

使用图标

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

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

添加fonts

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

在fonts下只留选中的即可。

导入

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

使用

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

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

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

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

 

最后的展示图标为下图：

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

 

最后是一个小技巧：

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

 

 

 

2020.11.18

更新一种更简单的导入方法：

根据上面的流程：添加到项目后，不需要下载也可以可以直接获取在线链接

拿到链接后，去浏览器获取数据，如下图：

拿到数据后，直接拷贝出来到一个css或wxss文件引入即可

拷贝进的文件名字为iconfont.css 或微信小程序内为iconfont.wxss。

其他框架引入参考上面的内容

微信小程序引入如下，引入的位置是app.wxss内，我将其放置在styles文件夹下：

@import "./styles/iconfont.wxss";

使用，在index.wxml文件内：

<text class="iconfont icon-shoucang1"></text>

大体是这样，后面发现更优的继续更新！