vue项目中如何使用iconfont

导读:vue项目中引入iconfont的方式

iconfont 的三种使用方法

  1. unicode 不常用
  2. Font class 像字体一样使用,默认黑色图标,无法修改颜色
  3. Symbol 支持多色图标,更灵活,推荐

一、unicode 略

二、Font class

方式一:下载到本地

第一步:iconfont-资源管理-我的项目-Font class -下载到本地

在这里插入图片描述

第二步 引入至项目中

在 index.html

<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" />
第三步 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" />

三、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"></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"></use>
</svg>

3.3 修改图标颜色

  • 在线修改:选中图标 批量去色
  • 本地修改:把js文件用正则表达式找出fill属性,把fill属性全干掉
  • 最后,设置外层颜色
.outerColor{color: red;
}

个人认为:在线引入的方式比较适合项目开发测试阶段,因为图标可能会有新增修改,使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载;本地下载引入的方式适合在运行上线阶段,避免线上引入不稳定访问不了图标。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/14194.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oneapi离线在docker部署时提示failed to get gpt-3.5-turbo token encoder

one-api部署在docker中&#xff0c;一直都正常。项目上线正式服务器后&#xff0c;发现one-api容器无法启动&#xff0c;日志发现其无限重启&#xff0c;错误原因是failed to get gpt-3.5-turbo token encoder&#xff0c;看来它肯定是需要联网下载数据&#xff0c;我的正式服务…

网页版收银系统比安装板收银系统的四大优势

在当今竞争激烈的零售市场中&#xff0c;高效的收银系统对于连锁实体店的管理至关重要。随着科技的不断发展&#xff0c;网页版收银系统成为越来越多零售企业的首选。网页版收银系统以其灵活性、可定制性和便利性&#xff0c;成为现代零售业的利器。本文将探讨网页版收银系统相…

BeanDefinition作用

BeanDefinition接口 BeanDefinition 描述一个 Bean 实例&#xff0c;这个实例有哪些属性值、构造函数以及一些其他信息&#xff0c;就是描述Bean实例的信息。 BeanDefinition是一个接口&#xff0c;允许BeanFactoryPostProcessor 内省和修改属性值和其他 Bean 元数据。 点击了…

【加密与解密(第四版)】第十五章笔记

第十五章 专用加密软件 15.1 认识壳 15.2 压缩壳 UPX、ASPack、PECompact 15.3 加密壳 ASProtect(压缩、加密、反跟踪代码、CRC校验、花指令)、Armadillo(穿山甲)、EXECryptor、Themida 15.4 虚拟机保护软件 虚拟机引擎&#xff08;编译器解释器虚拟CPU环境指令系统&#xff…

小型发电机不发电原因和解决方法

小型发电机不发电可能由多种原因造成&#xff0c;以下是一些常见原因及其解决方法&#xff1a; 1.电池电量不足&#xff1a;小型发电机通常需要电池来启动。如果电池电量不足&#xff0c;可能导致发电机无法启动。此时&#xff0c;您可以使用充电设备对电池进行充电&#xff0…

【运维项目经历|022】tomcat性能调优与集群部署项目

目录 项目名称 项目背景 项目目标 项目成果 我的角色与职责 我主要完成的工作内容 本次项目涉及的技术 本次项目遇到的问题与解决方法 本次项目中可能被面试官问到的问题 问题1&#xff1a;本次项目周期多长时间&#xff1f; 问题2&#xff1a;服务器部署架构方式及数…

Color预设颜色测试

"AliceBlue", "获取 ARGB 值为 的系统 #FFF0F8FF定义颜色。", "AntiqueWhite", "获取 ARGB 值为 的系统 #FFFAEBD7定义颜色。", "Aqua", "获取 ARGB 值为 的系统 #FF00FFFF定义颜色。", "Aquamarine"…

深度学习TensorFlow和Keras建立CNN模型口罩检测

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 随着新型冠状病毒&#xff08;COVID-19&#xff09;的爆发&#xff0c;口罩成为了公众防护的重要工具…

智能的PHP开发工具PhpStorm v2024.1全新发布——支持PHPUnit 11.0

PhpStorm是一个轻量级且便捷的PHP IDE&#xff0c;其旨在提高用户效率&#xff0c;可深刻理解用户的编码&#xff0c;提供智能代码补全&#xff0c;快速导航以及即时错误检查。可随时帮助用户对其编码进行调整&#xff0c;运行单元测试或者提供可视化debug功能。 立即获取PhpS…

Flutter 中的 InputDecorator 小部件:全面指南

Flutter 中的 InputDecorator 小部件&#xff1a;全面指南 在Flutter中&#xff0c;InputDecorator是一个用于装饰输入字段的组件&#xff0c;它为TextField和TextFormField提供了一个统一的外观和布局。InputDecorator可以让您自定义输入框的标签、填充、边框、图标、光标、错…

flask中的路由是什么意思

在Flask框架中&#xff0c;路由&#xff08;Routing&#xff09;是指将Web请求映射到处理这些请求的Python函数的过程。每个路由由一个URL规则和一个与之关联的视图函数组成。当用户访问一个特定的URL时&#xff0c;Flask会根据这个URL找到对应的视图函数&#xff0c;并执行该函…

【AD21】PCB板尺寸与层名称标注

PCB绘制完成后&#xff0c;需要给上级或生产制造商发送输出文件&#xff0c;输出文件中包含板尺寸标识和层标识可以方便工作的交接。 1. 板尺寸标识 首先板尺寸标识所在的层要在与板框不同的机械层&#xff0c;这里我选择机械5层。 点击放置->尺寸->线性尺寸 这里板尺…

开源绘图工具Rnote使用体验分享

软件介绍 Rnote,这款致力于提供矢量绘图、手写笔记以及文档注释功能的免费开源软件,逐渐成为了学生、教师以及绘图板用户的新宠。其独特之处在于,它不仅支持PDF和图片的导入导出,还拥有无限画布和适应各种屏幕大小的界面设计,这些功能使得Rnote在众多同类软件中脱颖而出。…

Spring Boot集成Kafka:最佳实践与详细指南

在构建分布式和微服务架构时&#xff0c;消息队列如Apache Kafka已成为实现高效通信和数据处理的关键组件。Spring Boot作为Java领域的流行框架&#xff0c;提供了与Kafka的无缝集成。本文将详细介绍如何在Spring Boot项目中优雅地集成Kafka&#xff0c;并通过最佳实践和代码示…

Boxy SVG for Mac:打造精致矢量图形的得力助手

在矢量图形设计领域&#xff0c;Boxy SVG for Mac以其出色的性能和丰富的功能&#xff0c;成为了设计师们的得力助手。 Boxy SVG for Mac(矢量图编辑器) v4.32.0免激活版下载 Boxy SVG具备强大的编辑能力&#xff0c;支持节点编辑、路径绘制、颜色填充等多种操作&#xff0c;让…

Python深度学习:最全的RML2018a数据集处理代码,你想要的数据集都可容易获取

文章目录 1. 拆分比较细的版本2. 最终留下的万能版本 1. 拆分比较细的版本 import h5py import numpy as np import scipy.io as io import os# 数据集&#xff1a;RML2018a (24种调制方式 * 26种信噪比* 4096个样本&#xff09;2555904 class ReadData():# 初始化def __init_…

最新腾讯音乐人挂机脚本,号称日赚300+【永久脚本+使用教程】

项目介绍 首先需要认证腾讯音乐人&#xff0c;上传自己的歌曲&#xff0c;然后用小号通过脚本去刷自己的歌曲 &#xff0c;赚取播放量 &#xff0c;1万播放大概就是50到130之间 腾讯认证不需要露脸&#xff0c;不吞量&#xff0c;不封号 脚本&#xff0c;全自动无脑挂机&…

pyecharts 输出空白不显示图形的解决办法

20240520补充&#xff1a; pyecharts在JupyterLab中无法显示的解决方案-CSDN博客 可以不用再看下面降级 notebook 的方法了&#xff0c;主要的原因是 pyecharts 在 notebook 7 之后使用了 JUPYTER_LAB 来画图了&#xff0c;看上面篇文章就可以了。 问题&#xff1a; 全新安…

Redis篇 有关Redis的认识和Redis的特性应用场景

Redis 一. Redis的基本概念1.1 应用/系统1.2 模块/组件1.3 分布式1.4 集群1.5 主/从1.6 中间件1.7 可用性1.8 响应时长1.9 吞吐 二.Redis的特性三.使用场景 一. Redis的基本概念 1.1 应用/系统 一个应用就是一个组,一个服务器程序 1.2 模块/组件 一个应用,里面有很多功能,每个…

用户态网络缓冲区设计

基于数组实现的环形缓冲区&#xff1a; 优点 使用固定大小的连续空间做用户态缓冲区&#xff0c;利用了内存访问的局部性&#xff0c;可以提高缓存命中率&#xff0c;提高程序性能&#xff0c;在处理大量数据时&#xff0c;缓存的利用率对性能有着很大的影响 正是基于性能的…