ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

前端开发知识之——vue项目中如何使用阿里iconfont图标库

前端开发知识之——vue项目中如何使用阿里iconfont图标库

前端开发知识之——vue项目中如何使用阿里iconfont图标库

一、创建项目

登录iconfont官网、创建对应的项目
image

二、添加所需要的图标到项目中

image
image
image

三、下载到本地

我的项目中找到刚才创建的项目,选择Font class选项,下载到本地
image

四、本地解压

本地解压缩、将文件夹中的内容复制到项目静态资源中,如assets/public/css/Iconfont下面
image

五、在main.js引用iconfont资源

image

六、使用

iconfont是前缀,xxx是自己添加的图标的代码,可以从网站上点击复制代码获取

<i class="iconfont xxx"></i>

image

返回列表