vue项目里面引入iconfont图标

71 阅读1分钟

1、第一次使用iconfont记得注册登录。element的图标有限,iconfont提供了更好看更海量的图标。帮助我们更好的实现我们的功能和界面。

2、在首页搜索符合你要求的图标加入购物车

image.png

3、点开购物车,这里我找了三张图标。添加至项目,如果没有项目,就右上角新建文件夹

image.png

4、新建一个test项目放图标

image.png

5、进入到项目里。点击下载至本地。下载一个压缩包下来,解压里面有八个文件。

image.png

image.png

6、把后六个文件拷到项目src/assets文件夹里建iconfont文件夹,把六个文件拿进去

image.png

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

import "./assets/iconfont/iconfont.css";

8、引入后就可以在页面使用啦

image.png

image.png

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