之前写过一篇文章,关于如何使用阿里巴巴矢量图标,但是之前使用的是直接调用阿里巴巴的cdn文件,而这篇教程说的是本地引入使用。

你可以先看一下上面这篇文章,前面的方法都差不多,从注册账号到查找图标再到添加项目,都是一样的方法和步骤,接下来不同的是需要你下载到本地操作。

点击下载至本地后你会下载得到一个压缩包 download.zip,将压缩包解压出后得到一个文件夹,文件夹内包含以下部分:

这里建议给文件夹重命名为 iconfont方便后面引入。

然后直接把文件夹放入自己项目的根目录,在网页中引入下载得到的css样式表文件。

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

引入之后直接在需要的地方调用图标,调用的时候需要放俩个类,而字体图标的类在文件夹内会有以一个 demo_index.html的网页。

打开 demo_index.html会进入一个页面,点击Font class选择图标复制类名,类名为红框里面的 .icon-unfold-more

图标引用格式举例:

<i class="iconfont icon-unfold-more"></i>

注意:第一个类名必须为:iconfont,第二个为图标的类名。

最后修改:2022 年 01 月 13 日
如果觉得我的文章不错,请随手点赞~