在ElementUI项目中集成iconfont图标库

在前端项目开发中经常会遇到使用的组件库提供的ICON图标不够用的情况。最常见的解决方案无非就是把设计图的图标切图引入到项目中。还有就是使用svg图标,封装一个渲染组件在项目里面直接引入这个组件。

本文将介绍另一种方法,即集成iconfont图标库的图标到项目中去,用最小化的改动满足图标需求。

快速开始

1、打开阿里巴巴的图标库网站:阿里巴巴矢量图标库,登录自己的账号。

完成这一步你会看到这样的界面。

2、搜索你需要的图标,然后选中你需要的图标,点击添加购物车,步骤如下图所示:

3、点击菜单栏购物车之后,弹出下面的页面,点击添加至项目。在弹出的侧栏里面选择要把图标添加到的项目,如果没有项目就新建。

4、把图标加入到指定的项目后,点击确定你就会跳转到项目详情页面,在这个页面点击项目设置,对图标前缀和字体名称做一些简单的设置,如下图。

修改完成后,点击保存。

5、下载图标文件到本地

  • iconfont.ttf、iconfont.woff、iconfong.woff2 是图标字体文件,可以把它们复制到你的项目中的 fonts 目录下。
  • iconfont.css 是 Font Class 方式使用图标的CSS代码,内容如下,但是记得修改图标字体文件的路径
@font-face {font-family: "element-icons";src: url('iconfont.woff2?t=1709537603593') format('woff2'),url('iconfont.woff?t=1709537603593') format('woff'),url('iconfont.ttf?t=1709537603593') format('truetype');
}.element-icons {font-family: "element-icons" !important;font-size: 18px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.el-icon-xitong:before {content: "\e67c";
}

6、把 iconfont.css 引入到项目中,在需要的地方就可以使用类名 el-icon-xitong 使用我们刚刚添加到项目中的图标了。

<i class="el-icon-xitong"></i>

总结

本文试图提供一种方便快捷的方法,帮助开发人员将iconfont图标集成到他们的前端项目中,满足项目对图标的需求。介绍了阿里巴巴图标库网站的使用方式,以及如何对图标项目进行设置,让这些图标可以直接在element-ui项目中应用。

在现在的项目中main.js引入字体图标的css样式

7、在组件当中就可以使用。使用之前要加iconfont。

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

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

相关文章

养老小程序源码家政服务小程序开发方案

预约上门养老小程序&#xff0c;是php开发预约&#xff0c;前端是uniapp&#xff0c;有开发好的小程序案例&#xff0c;可源码&#xff0c;也可以二开&#xff0c;也可以定制开发。 一 用户端&#xff1a;服务分类、服务内容详情介绍、在线下单支付&#xff0c;管理我的订单。…

前缀和差分【算法 13】

在算法领域中&#xff0c;前缀和与差分数组是两种高效处理区间问题的技术。它们能在特定问题场景下将时间复杂度从 (O(n)) 降到 (O(1))&#xff0c;适用于频繁的区间查询与修改操作。本文将简要介绍这两种技术及其应用。 1. 前缀和 (Prefix Sum) 前缀和是指一个数组的第 (i)…

利用TOPSIS算法进行生长素和施肥量对农作物各指标影响力的分析

文章目录 1 摘要2 问题的重述1&#xff0e; 背景介绍2&#xff0e; 问题的产生及进行数学建模的意义 3 TOPSIS算法1. TOPSIS算法介绍2. TOPSIS算法使用步骤 4 问题的分析1. 对问题一的分析及解答2. 对问题二的分析及解答3. 对问题三的分析及解答 5 模型的改进1. 验证2.模型改进…

整理了几十家高频面试题,让你避坑软件测试公司面试的套路,收藏收藏刷起来...

俗话说金九银十&#xff0c;就要到找工作的高峰期了 年前找我拿面试题的姐妹已经收到offer了&#xff0c;准备换工作的抓紧背起来哦 去面试的&#xff0c;一定要提前了解一下&#xff0c;这些面试题。可能不是特别全面&#xff0c;但是已经够用了。你们面试时还遇到了哪些奇葩…

Redis中的数据类型及应用场景(面试版)

五种常用数据类型介绍 Redis中存储的都是key-value对结构的数据&#xff0c;其中key都是字符串类型&#xff0c;value有5种常用的数据类型&#xff1a; 字符串 string 哈希 hash 列表 list 集合 set 有序集合 sorted set / zset 各种数据类型特点 解释说明&#xff1a; …

【C++】vector(下)--上篇

个人主页~ vector&#xff08;上&#xff09;~ vector 二、vector的模拟实现1、了解组成2、vector.h&#xff08;1&#xff09;为什么有了size_t参数的vector构造函数还要再写一个int参数的重载vector构造函数&#xff08;2&#xff09;为什么reserve不用memcpy&#xff08;3&…

DAMA数据管理知识体系(第3章 数据治理)

课本内容 3.1 引言 数据治理&#xff08;Data Governance&#xff0c;DG&#xff09;的定义是在管理数据资产过程中行使权力和管控&#xff0c;包括计划、监控和实施。数据治理项目的范围和焦点 战略 定义、交流和驱动数据战略和数据治理战略的执行制度 设置与数据、元数据管理…

MySQL编译安装

1.源码包地址 2.编译/安装 3.设置环境变量 4.初始化/登录 地址: MYSQL源码包下载 右键复制链接 使用wget 下载到/usr/local/src下 再使用rpm –ivh 安装 --这个时候跳转到 cd /root/rpmbuild/SOURCES 使用ll查看有什么东西 yum -y install gcc gcc-c ncurses ncurses-d…

Tensorflow实现深度学习8:猫狗识别

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 一 导入数据 import matplotlib.pyplot as plt import tensorflow as tf # 支持中文 plt.rcParams[font.sans-serif] [SimHei] # 用来正常显示中文标签 plt.rcParams[axes.unicode_minus] Fals…

本地部署Xinference实现智能体推理工作流(二)

第二篇章 Dify接入 Xinference 部署的本地模型 1. 安装Dify 克隆 Dify 源代码至本地。 git clone https://github.com/langgenius/dify.git 2. 启动Dify 进入 Dify 源代码的 docker 目录&#xff0c;执行一键启动命令&#xff1a; cd dify/docker cp .env.example .env d…

Linux学习(15)-网络编程:滑动窗口、拥塞控制、udp

本节学习内容 1.滑动窗口&#xff08;1.滑动窗口的作用2.如果如果接收端填充的接收窗口为0&#xff0c;发送端接下来怎么处理3.糊涂窗口综合征4.tcp中nagle算法是什么&#xff09; 2.拥塞控制 3.udp协议特点及编程流程 本节可能会用到的指令 ifconfig查看自己的ip地址 pi…

Amazon Bedrock 实践:零基础创建贪吃蛇游戏

本文探讨了如何利用 Amazon Bedrock 和大型语言模型&#xff0c;快速创建经典的贪吃蛇游戏原型代码。重点展示了利用提示工程&#xff0c;将创新想法高效转化为可运行代码方面的过程。文章还介绍了评估和优化提示词质量的最佳实践。 亚马逊云科技开发者社区为开发者们提供全球的…

C# UserControl、Dockpanel和DockContent、Cursor、

一、UserControl类 UserControl 是 .NET 中的一个基类&#xff0c;用于创建自定义控件&#xff0c;主要用于 Windows Forms 和 WPF。通过继承 UserControl&#xff0c;你可以设计和实现具有特定界面和功能的控件组件。UserControl 允许你将多个标准控件组合在一起&#xff0c;…

网络层 III(划分子网和构造超网)【★★★★★★】

&#xff08;★★&#xff09;代表非常重要的知识点&#xff0c;&#xff08;★&#xff09;代表重要的知识点。 一、网络层转发分组的过程 分组转发都是基于目的主机所在网络的&#xff0c;这是因为互联网上的网络数远小于主机数&#xff0c;这样可以极大地压缩转发表的大小。…

C++和QT

引用 概念 引用是个别名 格式 数据类型 &引用名 同类型的变量名 &#xff08;&引用符号&#xff09; 数据类型 &引用名 同类型的变量名 &#xff08;&引用符号&#xff09;int a 10;int &b a; //给a取个别名叫b, b引用a 数组引用 int a;a10;int &…

【AI绘画】Midjourney前置指令/describe、/shorten详解

文章目录 &#x1f4af;前言&#x1f4af;Midjourney前置指令/describe使用方法1️⃣2️⃣3️⃣4️⃣&#xff08;选择对应提示词生成图片&#xff09;&#x1f504;&#xff08;重新识别生成提示词&#xff09;&#x1f389;Imagine all&#xff08;一次性生成所有&#xff09…

BERT:Pre-training of Deep Bidirectional Transformers forLanguage Understanding

个人觉着BERT是一篇读起来很爽的论文 摘要 我们引入了一种新的语言表示模型BERT&#xff0c;它代表Bidirectional Encoder Representations from Transformers。与最近的语言表示模型不同(Peters et al.&#xff0c; 2018a;Radford et al.&#xff0c; 2018)&#xff0c; BER…

Prometheus+Grafana的安装和入门

概念 什么是Prometheus? Prometheus受启发于Google的Brogmon监控系统&#xff08;相似kubernetes是从Brog系统演变而来&#xff09;&#xff0c; 从2012年开始由google工程师Soundclouds使用Go语言开发的开源监控报警系统和时序列数据库(TSDB)。&#xff0c;并且与2015年早起…

使用LinkedHashMap实现固定大小的LRU缓存

使用LinkedHashMap实现固定大小的LRU缓存 1. 什么是LRU&#xff1f; LRU是"Least Recently Used"的缩写&#xff0c;意为"最近最少使用"。LRU缓存是一种常用的缓存淘汰算法&#xff0c;它的核心思想是&#xff1a;当缓存满时&#xff0c;优先淘汰最近最少…

18959 二叉树的之字形遍历

### 思路 1. **输入读取**&#xff1a; - 读取输入字符串&#xff0c;表示完全二叉树的顺序存储结构。 2. **构建二叉树**&#xff1a; - 使用队列构建二叉树&#xff0c;按层次顺序插入节点。 3. **之字形层序遍历**&#xff1a; - 使用双端队列进行层序遍历&…