vue中使用iconfont图标

news2024/11/25 22:27:40

1. 选择一个图标加入购物车

 2、点击右上角购物车图标。点击下载代码,并添加至项目。

 

3、将下载好的代码文件放入项目中的assets目录的styles下

iconfont.css直接放在styles下

在styles目录下新建目录iconfont,将iconfont.ttf、iconfont.woff、iconfont.woff2放在里面

4、到iconfont.css文件中修改路径 (修改成下面这样)

5、到main.js中引入iconfont.css文件 

6、引用的图标一定要有class=“iconfont”  不然的话不显示!!!

附加一个在伪类中使用

::v-deep .el-icon-arrow-right:before {

  font-family: iconfont; // 一定要这样写  不然不显示

  content: "\e603"; // 把“e”前面的替换成“\”

  font-size: 20px;

}

 

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

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

相关文章

ARM PMU

PMU单元概览 ARM PMU概要 PMU作为一个扩展功能,是一种非侵入式的调试组件。 对PMU寄存器的访问可以通过CP15协处理器指令和Memory-Mapped地址。 基于PMUv2架构,A7处理器在运行时可以收集关于处理器和内存的各种统计信息。对于处理器来说这些统计信息中…

Elasticsearch:ES|QL 动手实践

在我之前的文章 “Elasticsearch:ES|QL 查询语言简介”,我对 Elasticsearch 的最新查询语言 ES|QL 做了一个简单的介绍。在今天的文章中,我们详细来使用一些例子来展示 ES|QL 强大的搜索与分析功能。 安装 如果你还没有安装好自己的 Elastic…

LCM-LoRA:通用stable diffusion 加速模块!2023.11.13顶会论文速递!

整理:AI算法与图像处理 欢迎关注公众号 AI算法与图像处理,获取更多干货: 推荐 微信交流群现已有2000从业人员交流群,欢迎进群交流学习,微信:nvshenj125 B站最新成果demo分享地址:https://space.…

Actipro Software WinForms Controls 23.1.2

Actipro它被认为是一组 UI 控件,用于为用户和开发人员创建漂亮的窗口窗体以及桌面应用程序。Actipro Software 创建于 1999 年,被认为是为用户和开发人员(主要为 Microsoft 平台 .NET)提供软件组件的私营提供商。基于克利夫兰&…

Rust编程中的共享状态并发执行

1.共享状态并发 虽然消息传递是一个很好的处理并发的方式,但并不是唯一一个。另一种方式是让多个线程拥有相同的共享数据。在学习Go语言编程过程中大家应该听到过一句口号:"不要通过共享内存来通讯"。 在某种程度上,任何编程语言中的信道都类…

Actipro Software WPF Controls 23.1.3

Actipro Software WPF Controls v23.1.3 Actipro Software 为 Microsoft 提供软件组件和 .NET 平台。它位于克利夫兰,重点主要是提供高质量的用户界面软件组件以及客户的过程,以便他们有能力信任,以便为用户应用程序添加强大的功能。自 .NET…

Vscode舒适的主题推荐

1. One Dark Pro与One Dark Pro Darker 感觉配色特别好看,强烈推荐

如何编写一个Perl爬虫程序

要编写一个Perl爬虫程序,首先需要安装LWP::UserAgent模块。你可以使用cpan命令来安装该模块: cpan LWP::UserAgent 安装完成后,可以使用以下代码来编写爬虫程序: use LWP::UserAgent; use HTML::TreeBuilder; my $proxy_host …

【算法与数据结构】46、47、LeetCode全排列I, II

文章目录 一、46.全排列I二、47.全排列II三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、46.全排列I 思路分析:本题要求是全排列,意味着每次递归的时候startIndex都要从0开始,否则…

基于 Letterize.js + Anime.js 实现炫酷文本特效

如上面gif动图所示,这是一个很炫酷的文字动画效果,文字的每个字符呈波浪式的扩散式展开。本次文章将解读如何实现这个炫酷的文字效果。 基于以上的截图效果可以分析出以下是本次要实现的主要几点: 文案呈圆环状扩散开,扩散的同时…

代驾预约小程序系统源码 :提起预约,避免排队 带完整搭建教程

大家好啊,又到罗峰来给大家分享好用的源码系统的时间了。今天要给大家分享的第一款代驾预约小程序源码系统。传统的代驾服务中,用户往往需要在酒后代驾、长途驾驶等场景下,面对排队等待代驾司机空闲时间的繁琐过程。这不仅浪费了用户的时间和…

excel中的OFFSET函数

介绍 OFFSET函数是确定从基点出发移动后的引用区域。它有5个参数: 第1个参数是引用的参考基点区域第2个参数是移动的行数,正数代表向下移动的行数,负数代表向上移动的行数第3个参数是移动的列数,正数代表向右移动的列数&#xf…

性价比高的台灯推荐,呼声最高的五款护眼台灯推荐

台灯可以说家家必备!家中有上学的小孩更是需要一款好台灯,因为看书、写字、做作业都离不开台灯,一款好的台灯不仅会提供明亮的学习环境,而且还能保护视力,预防近视,因此,挑选台灯绝对不可以马虎…

企业计算机服务器中了halo勒索病毒怎么办,halo勒索病毒解密数据恢复

随着科技技术的不断提升,越来越多的企业开始走向数字化办公,让企业的生产运营得到了快速发展,但随之而来的网络安全威胁引起了人们的重视,近期,云天数据恢复中心陆续接到很多企业的求助,企业的计算机服务器…

产品经理天天跑火车,我直接和他闹翻

前言 说起产品经理与程序员,简直就是一对冤家。 程序员觉得产品经理不尊重技术规则,产品经理埋怨程序员不尊重创作用心。 一边互怼,一边还要合作,终于,有人忍不下去,动手了…… ![](https://img-blog.cs…

RFID技术在仓储物流管理中的应用方案

一、方案背景 当前市场竞争日益激烈,提高生产效率、降低运营成本对来说企业至关重要,仓储物流管理在各个行业广泛应用,设计和建立完善的仓储管理流程,提高仓储周转效率,减少运营资金的占用,将冻结的资产转…

第3关:集合操作100

任务描述相关知识编程要求测试说明 任务描述 本关任务:使用 集合操作解决实际问题 相关知识 1.集合并操作符 可转换为SQL 若R,S的属性名不同,可使用重命名使相应列名一致后进行并操作 例如:R(A,B,C) S(D,E,F) select A,B from R union sel…

深入了解鼠标光标的设置过程

有一位读者问了这样一个问题: “为什么鼠标光标的设定绑定在窗口类,而不是窗口上?” 这个问题隐含地假设了光标与窗口类相关联。虽然每个窗口类都有一个关联的光标,但决定使用哪个光标的是窗口。 光标设置过程在 WM_SETCURSOR 消…

用CHAT如何写视频剪辑思路?

问CHAT:我的行业是国学教育,我的工作是视频剪辑师,给我推荐几个剪辑思路 CHAT回复: 作为一个国学教育视频剪辑师,你的主要任务是通过剪辑创作引人入胜、富有教育性的视频。 以下是一些可能对你有帮助的剪辑思路&…

数据结构-散列表

列表(Hash Table),又称哈希表,是一种数据结构,特点是:数据元素的关键字与其存储地址直接相关 例:有一堆数据元素,关键字分别为{19,14,23&#xff…