博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue项目中引入阿里图标iconfont
阅读量:755 次
发布时间:2019-03-23

本文共 499 字,大约阅读时间需要 1 分钟。

vue如何在创建好的项目中引入阿里图标iconfont呢,涉及到以下几个步骤:

1、首先先到阿里图标官方网站,先对账户进行登录,登录完成后任意选择几个图标加入购物车

在这里插入图片描述
2、加入购物车后,点击页面最右上方的 “购物车” 按钮,之后点击 “添加至项目” ,添加完成之后,到 “我的项目” 中查看,同时点击 “下载到本地” 进行下载。

在这里插入图片描述

3、下载完成后,接下来是引入vue项目中。创建完vue项目之后,项目目录如下:

在这里插入图片描述

4、在assets中创建目录名为iconfont的目录,创建完成后,将刚刚第二步下载后的9个文件拷贝到此目录。

5、之后在src文件下的main.js引入文件,具体引入形式如下:

import './assets/iconfont/iconfont.css';

在这里插入图片描述

:此处引入路径根据自身所放入文件地址进行调整

6、引入后,就可以在项目中使用啦!具体使用方式:

:class名字为字符串iconfont再加上具体图标的图标名所组成,图标名可通过阿里图标官网在“我的项目”中对对应图标复制代码后粘贴查看。

7.最终显示效果:

在这里插入图片描述

转载地址:http://vnizk.baihongyu.com/

你可能感兴趣的文章