vue项目中使用iconfont方式
更新时间：2024年07月27日 09:08:25 作者：不吃香菜的蟹老板
这篇文章主要介绍了vue项目中使用iconfont方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目中引入iconfont的方式
iconfont的三种使用方法
- unicode 不常用
- Font class 像字体一样使用，默认黑色图标，无法修改颜色
- Symbol 支持多色图标，更灵活，推荐
一、unicode
- 略
二、Font class
方式一：下载到本地
- 第一步：iconfont-资源管理-我的项目-Font class -下载到本地
- 第二步：引入至项目中
在 index.html
<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" rel="external nofollow" />
- 第三步：vue页面中使用
<span class="iconfont icon-off-line"></span>
方式二：在线引用
iconfont-资源管理-我的项目-Font class - 查看在线链接 - 项目引用样式文件 - 页面中使用；
使用方式跟上面的方式一大体相同，只是在index.html中引入href 不一样
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4*******_kylxvxppycg.css" rel="external nofollow" />
三、Symbol
3.1 下载到本地的方式
- 3.1.1 iconfont-我的项目-symbol-下载到本地 - 解压提取出最低层文件夹（font_421XXXXX）-重命名文件夹为 iconfont（包含iconfont.js）放在vue项目中（我是放在/assets/ ）
- 3.1.2 在assets 目录下建一个icon.css文件 /assets/css/icon.css
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
- 3.1.3 在main.js中 引入js和css
import './assets/iconfont/iconfont.js' import './assets/css/icon.css'
- 3.1.4 最后vue文件中使用图标
<svg class="icon outerColor" aria-hidden="true">
<use xlink:href="#icon-xuanzhong" rel="external nofollow" rel="external nofollow" ></use>
</svg>
3.2 在线引用的方式
- 3.2.1 、 iconfont-我的项目-symbol-查看在线链接-复制链接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js
- 3.2.2 、 第二步跟上面一样，在assets 目录下建一个icon.css文件
- 3.2.3、 在mian.js中引入 icon.css文件，在index.html引入在线js资源文件并且加上前缀 https:
!!! 记住在线的引入不是在main.js中引入js文件了，因为没有本地iconfont目录,而是在index.html中引入
// 在 main.js
import './assets/css/icon.css'
// 在public/index.html
<head>
<script src="https://at.alicdn.com/t/c/font_4*****_famq0z6ltd.js"></script>
</head>
- 3.2.4 最后在页面中使用图标是一样的
<svg class="icon outerColor" aria-hidden="true">
<use xlink:href="#icon-xuanzhong" rel="external nofollow" rel="external nofollow" ></use>
</svg>
3.3 修改图标颜色
- 在线修改：选中图标 批量去色
- 本地修改：把js文件用正则表达式找出fill属性，把fill属性全干掉
- 最后，设置外层颜色
.outerColor{
color: red;
}
个人认为：
在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；
本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中CSS动画原理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了vant/vue跨域请求解决方案,需要的朋友可以参考下2022-12-12
增删改查是我们写项目百分之七十会遇到的代码,下面这篇文章主要给大家介绍了关于vue前端实现表格数据增查改删功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要为大家详细介绍了Vue实现数字时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家介绍了vue3响应式reactive依赖收集派发更新原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了vue中如何使用embed标签PDF预览，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家介绍了Vue3 中有场景是 reactive 能做而 ref 做不了的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了vue项目使用modbus实现串口通讯的示例代码,可以实现与Modbus设备的数据交互,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-02-02
Vue 页面切换效果之 BubbleTransition(推荐)
使用 vue，vue-router，animejs 来讲解如何实现vue页面切换效果之 BubbleTransition，需要的朋友参考下吧2018-04-04
这篇文章主要介绍了vue中表格设置某列样式、不显示表头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论