elementui组件库,vueadminelement

虽然项目内可能经常出现图标使用问题，但我经常使用的是蚂蚁标志库。

要使用图标，必须先下载图标。 以下是下载和使用插图库的步骤。

要获取图标1，必须转到蚂蚁矢量库的主页，然后单击我的项目：

2 .单击新项目：

3 .选择下面选择的是你的图标class的前缀是icon，这里都是默认的。

4 .创建新物品后，向购物车添加图标。 完成所需的添加后，请打开购物车并将其添加到项目中，然后选择并确认项目

5 .查看添加的7个图标，点击即可本地下载：

这样就能得到需要的图标。

使用图标下载文件的文件有很多，但主要使用的只有这些文件

其他的删除就可以了。 保留几个新的fonts文件夹，并将这些文件添加到fonts文件夹中。

添加fonts以打开vue项目，然后将其添加到src目录下的assets文件夹下。

在fonts下只留下选择的东西就可以了。

要导入，必须在main.js中导入iconfont.css文件。 请添加以下语句。

导入完成后，在需要图标的地方使用。

可以通过在iclass=' icon font icon-user '/iclass属性中设置类名(iconfonticon-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=' iconfonticon-shoucang1'/text大致如此，我发现以后会继续进行更好的更新！