iconfont字体图标在vue脚手架的使用

在vue项目中引入iconfont字体图标
https://hehuiyun.github.io/2018/01/22/在vue项目中引入iconfont字体图标/

下载到本地,引入文件
推荐这种方法,第一种方法没有网络的话,图标就显示不了。

在iconfont官网中下载文件
https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1076494

如图所示:
在这里插入图片描述

下载的文件目录如图所示:

在这里插入图片描述

步骤:

(1)将这四个文件放到项目新建的fonts文件中,如图:

在这里插入图片描述

(2)将iconfont.css 文件引入到main.js文件中

​ import './common/css/iconfont.css'

注意:要将iconfont.css 文件中src引入的字体路径改成正确的相对路径,如图所示:

(3)引入iconfont 和每个icon的相对应的类名就可以了。

如:<i class="iconfont icon-menu-two">
在这里插入图片描述


在这里插入图片描述
戳这里svgo https://www.zhangxinxu.com/wordpress/2016/02/svg-compress-tool-svgo-experience/

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/88319344
今日推荐