码迷,mamicode.com
首页 > 其他好文 > 详细

在vue项目中使用iconfont

时间:2020-07-15 01:01:18      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:load   port   www   gem   目录   下载   路径   href   alt   

在实际的项目开发中,我们经常会借助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

标签:load   port   www   gem   目录   下载   路径   href   alt   

原文地址:https://www.cnblogs.com/baebae996/p/13302939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!