vue2 引入阿里图标库iconfont

news2024/9/21 19:01:50

有时候我们使用的 ui 里面图标是不够丰富的,不一定可以满足我们的需求。

这时我们可以引入阿里图标库来丰富自己的项目图标。

上步骤:

1、点击文字地址连接:

iconfont-阿里巴巴矢量图标库

2、登录,没有账号需要先使用手机号注册一下。

 3、有明确需要的图标,可以通过搜索关键字进行搜索

 4、选择自己需要的 icon 图标并添加入库(鼠标划入图标即可看到)

 5、选择完成后,点击右上角购物车  (不需要付费)

6、选择 下载代码 按钮(不需要付费,会下载一个压缩包)

 7、将压缩包解压到项目中(我解压到了 /src/assets 中)

 8、将文件名称修改一下并将文件中 iconfont.css 文件引入 main.js 文件

文件名称修改为 font_icon ,原文件名称不利于阅读,修改文件名称是为了方便引入和查找

// 引入iconfont图标
import "../src/assets/font_icon/iconfont.css"

9、查看 iconfont.css 并使用图标。

iconfont.css 中有你需要的图标类名,将类名与 公共类名一起使用即可。

<i class="iconfont icon-weibiaoti--"></i>
<i class="iconfont icon-dengpao"></i>
<i class="iconfont icon-muluguanli"></i>

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

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

相关文章

【Java题】调整奇数位于偶数之前(超简单版)

题目&#xff1a; 调整数组顺序使得奇数位于偶数之前。调整之后&#xff0c;不关心大小顺序。 如数组&#xff1a;[1,2,3,4,5,6,7,8,9] 调整后可能是&#xff1a;[1, 9,3,7,5, 6, 4, 8, 2] 代码&#xff1a; import java.util.Arrays;public class Main {public static voi…

MySQL存储引擎及索引机制

MySQL技术——存储引擎和索引机制 一、存储引擎概述二、常见存储引擎的区别三、索引机制四、索引的底层实现原理五、InnoDB主键和二级索引六、聚集索引和非聚集索引七、哈希索引八、InnoDB的自适应哈希索引九、索引常见问题十、慢查询日志总结 一、存储引擎概述 插件式存储引擎…

b站小土堆pytorch学习记录——P7-P8 Tensorboard的使用

文章目录 一、前置知识1.Tensorboard是什么2.SummaryWriter3.add_scalar()4.add_image() 二、代码1.一次函数2.蚂蚁和蜜蜂图片 一、前置知识 1.Tensorboard是什么 TensorBoard 是 TensorFlow 的可视化工具&#xff0c;它允许开发者可视化模型的图&#xff08;graph&#xff0…

一线互联网大厂中高级Android面试真题收录,记一次字节跳动Android社招面试

在开始回答前&#xff0c;先简单概括性地说说Linux现有的所有进程间IPC方式&#xff1a; 1. **管道&#xff1a;**在创建时分配一个page大小的内存&#xff0c;缓存区大小比较有限&#xff1b; 2. 消息队列&#xff1a;信息复制两次&#xff0c;额外的CPU消耗&#xff1b;不合…

驱动高级--mknod

一、起源 仅devfs&#xff0c;导致开发不方便以及一些功能难以支持&#xff1a; 热插拔 不支持一些针对所有设备的统一操作&#xff08;如电源管理&#xff09; 不能自动mknod 用户查看不了设备信息 设备信息硬编码&#xff0c;导致驱动代码通用性差&#xff0c;即没有分离…

【Python】成功解决ValueError: not enough values to unpack (expected 2, got 1)

【Python】成功解决ValueError: not enough values to unpack (expected 2, got 1) &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&am…

本科毕业设计:计及并网依赖性的分布式能源系统优化研究。(C语言实现)(内包含NSGA II优化算法)(二)

目录 前言 1、sofc函数 2、光伏板函数 3、集热场函数 4、sofc电跟随策略函数 5、二分法找sofc运行点函数 6、目标函数&#xff1a;成本 7、目标函数&#xff1a;二氧化碳排放量 8、目标函数&#xff1a;并网依赖性 前言 本篇文章介绍的是我的毕业设计&#xff0c;我将C…

【前端素材】推荐优质后台管理系统Annex平台模板(附源码)

一、需求分析 1、系统定义 后台管理系统是一种用于管理网站、应用程序或系统的管理界面&#xff0c;通常由管理员和工作人员使用。它提供了访问和控制网站或应用程序后台功能的工具和界面&#xff0c;使其能够管理用户、内容、数据和其他各种功能。 2、功能需求 后台管理系…

基于java+springboot动物检疫信息管理系统设计和实现

基于java SSM springboot动物检疫信息管理系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文…

3d模型版本转换器注意事项---模大狮模型网

在使用3D模型版本转换器时&#xff0c;有一些注意事项可以帮助您顺利完成模型转换并避免不必要的问题&#xff1a; 数据完整性&#xff1a;在进行模型转换之前&#xff0c;确保您的原始3D模型文件没有损坏或缺失数据。损坏的文件可能导致转换器无法正常处理或输出错误的结果。 …

公钥密码体制

公钥密码体制 一个系统中,n个用户之间要进行保密通信,为了确保安全性,两两用户之间的密钥不能一样。这种方式下,需要系统提供C2 n=n(n-1)/2把共享密钥。这样密钥的数量就大幅增加了,随之而来的产生、存储、分配、管理密钥的成本也大幅增加。而使用公钥密码体制可以大大减…

[unity] c# 扩展知识点其一 【个人复习笔记/有不足之处欢迎斧正/侵删】

.NET 微软的.Net既不是编程语言也不是框架,是类似于互联网时代、次时代、21世纪、信息时代之类的宣传口号,是一整套技术体系的统称&#xff0c;或者说是微软提供的技术平台的代号. 1.跨语言 只要是面向.NET平台的编程语言(C#、VB、 C、 F#等等)&#xff0c;用其中一种语言编写…

基于JavaWeb实现的药店管理系统

一、系统架构 前端&#xff1a;jsp | layui | jquery | css 后端&#xff1a;spring | springmvn | mybatis 环境&#xff1a;jdk1.8 | mysql 二、代码及数据库 三、功能介绍 01. 登录 02. 首页 03. 药品管理 04. 销售管理-销售记录管理 05. 销售管理-退…

Day07:基础入门-抓包技术全局协议封包监听网卡模式APP小程序PC应用

目录 非HTTP/HTTPS协议抓包工具 WireShark 科来网络分析系统 WPE封包 思维导图 章节知识点&#xff1a; 应用架构&#xff1a;Web/APP/云应用/三方服务/负载均衡等 安全产品&#xff1a;CDN/WAF/IDS/IPS/蜜罐/防火墙/杀毒等 渗透命令&#xff1a;文件上传下载/端口服务/Sh…

【YOLO v5 v7 v8 小目标改进】BiFormer:从局部空间特征到高效的全局空间特征

BiFormer&#xff1a;从局部空间特征到高效的全局空间特征 提出背景BiFormer 结构 小目标涨点YOLO v5 魔改YOLO v7 魔改YOLO v8 魔改 提出背景 论文&#xff1a;https://arxiv.org/pdf/2303.08810.pdf 代码&#xff1a;https://github.com/rayleizhu/BiFormer 问题: 传统的卷…

c++面试三 -- 智能指针--7000字

一、智能指针 C 中的智能指针是一种用于管理动态分配的内存的对象&#xff0c;它们可以自动进行内存管理&#xff0c;避免内存泄漏和悬挂指针等问题。 1. 悬挂指针 悬挂指针&#xff08;dangling pointer&#xff09;是指在程序中仍然存在但已经不再指向有效内存地址的指针。悬…

Android Shadow插件化框架分析与集成(一)

一、shadow源码导入及分析 1、下载项目源码 2、导入到Android studio 3、设置jdk及sdk版本 包/应用描述类型sample-constant公共字符串常量libsample-host宿主应用applicationsample-host-lib宿主应用依赖包libsample-manager是插件管理器的动态实现,主要负责加载插件和安装…

吸引用户购买产品的文案技巧,媒介盒子揭秘

在营销过程中&#xff0c;想要吸引用户购买产品&#xff0c;文案是重中之重&#xff0c;需要一定的技巧才能将文案写好&#xff0c;今天媒介盒子就来和大家聊聊&#xff1a;在品牌推广中如何通过一些小技巧吸引用户购买产品&#xff1a; 一、 少说专业术语 少说行话、黑话。多…

【VTKExamples::PolyData】第四十一期 PointLocator

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 前言 本文分享VTK样例PointLocator,并解析接口vtkPointLocator,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 1. PointLocator …

C++ 补充之常用排序算法

C 补充之常用排序算法 常用的排序算法主要包括冒泡排序、选择排序、插入排序、快速排序、归并排序和堆排序&#xff0c;下面简单介绍一下它们的概念和原理&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff1a; 冒泡排序是一种基础的排序算法&#xff0c;它重…