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小姐姐编辑了图标都要开发人员去下载；

本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue2.0 多 Tab切换组件的封装实例
本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
Vue2.0 vue-source jsonp 跨域请求
这篇文章主要介绍了Vue2.0 vue-source jsonp 跨域请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue3中的elementPlus全局组件中文转换方式
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue中methods、mounted等的使用方法解析
这篇文章主要介绍了vue中methods、mounted等的使用方法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
Vue的Flux框架之Vuex状态管理器
本文内容主要参考官方教程，为了方便理解，用更加通俗的文字讲解Vuex，也原文内容做一些重点引用。希望会对你有所帮助。
2017-07-07
详解如何在vue项目中使用layui框架及采坑
这篇文章主要介绍了vue使用layui框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue为自定义路径设置别名的方法
这篇文章介绍了vue为自定义路径设置别名的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-11-11
vue3基础知识剖析
笔者这篇文章会从vue3基础的知识点开始剖析，特别是在将composition API的时候，在代码示例中不会一上来就使用setup语法糖，而是用早期的setup函数，这样方便于初学的小伙伴们理解跟学习
2022-08-08
Vue3 Element Plus el-form表单组件示例详解
这篇文章主要介绍了Vue3 Element Plus el-form表单组件,Element Plus 是 ElementUI 的升级版，提供了更多的表单控件和功能，同时还改进了一些细节和样式，本文结合示例代码给大家详细讲解，需要的朋友可以参考下
2023-04-04
vue实现将时间戳转换成日期格式
这篇文章主要介绍了vue实现将时间戳转换成日期格式方式,具有很好的参考价值,希望对大家有所帮助,
2023-10-10