在vue项目中使用iconfont
Posted baebae996
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在vue项目中使用iconfont相关的知识，希望对你有一定的参考价值。
在实际的项目开发中，我们经常会借助confont图标库来渲染一些图标
本文将以win平台为例，详细介绍在vue项目中使用iconfont的一般流程
一、选择图标并下载到本地
打开 iconfont官网
进入“图标管理”中“我的项目”，并新建项目
挑选图标放入购物车中，然后打开购物车侧边栏，“添加至项目”
回到“我的项目”，点击“下载至本地”
二、在项目中引入、使用 iconfont
在vue项目的styles目录下，新建 iconfont 目录
将 以 iconfont为文件名、以.eot .svg .ttf .woff为后缀的4个文件放入iconfont目录中
将 iconfont.css 文件放入styles目录下
在main.js中引入CSS文件
import ‘styles/iconfont.css‘
然后打开 iconfont.css 文件，修改相关文件的src路径
最后，在需要用到图标的html代码中
为图标所在的标签添加 class="iconfont"
并回到iconfont官网，复制图标代码到标签内即可
以上是关于在vue项目中使用iconfont的主要内容，如果未能解决你的问题，请参考以下文章