在ElementUI项目中集成iconfont图标库

news/2024/9/19 0:39:44/ 标签: elementui, 前端, javascript

前端项目开发中经常会遇到使用的组件库提供的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.ppmy.cn/news/1519800.html

相关文章

9、LLaMA-Factory项目微调介绍

1、LLaMA Factory 介绍 LLaMA Factory是一个在GitHub上开源的项目&#xff0c;该项目给自身的定位是&#xff1a;提供一个易于使用的大语言模型&#xff08;LLM&#xff09;微调框架&#xff0c;支持LLaMA、Baichuan、Qwen、ChatGLM等架构的大模型。更细致的看&#xff0c;该项…

flutter 手写时钟

前言&#xff1a; 之前看过别人写的 js实现的 时钟表盘 挺有意思的&#xff0c;看着挺好 这边打算自己手动实现以下。顺便记录下实现过程&#xff1a;大致效果如下&#xff1a; 主要技术点&#xff1a; 表盘内样 倒角&#xff1a; 表盘下半部分是有一点倒角的感觉&#xff0c;…

尚品汇-MQ模块搭建测试、消息不丢失(重)(四十三)

目录&#xff1a; &#xff08;1&#xff09;消息不丢失 &#xff08;2&#xff09;消息确认 &#xff08;3&#xff09;消息确认业务封装 &#xff08;4&#xff09;封装发送端消息确认 &#xff08;5&#xff09;封装消息发送 &#xff08;6&#xff09;发送确认消息测试…

鸿蒙(API 12 Beta3版)【媒体资源使用指导】Media Library Kit媒体文件管理服务

应用可以通过photoAccessHelper的接口&#xff0c;对媒体资源&#xff08;图片、视频&#xff09;进行相关操作。 说明 在进行功能开发前&#xff0c;请开发者查阅[开发准备]&#xff0c;了解如何获取相册管理模块实例和如何申请相册管理模块功能开发相关权限。文档中使用到p…

基于深度学习的游客满意度分析与评论分析【情感分析、主题分析】

需要本项目的可以私信博主 目录 1 绪论 1.1 选题背景及研究意义 1.1.1 选题背景 1.1.2 研究意义 1.2 研究内容与方法 1.2.1 研究内容 1.2.2 研究方法 1.3 创新与不足 1.3.1创新点 1.3.2研究局限性 2 文献综述 2.1 相关概念界定 2.1.1 大数据分析 2.1.2 游客满意度 2.2 国内外研…

大数据系列之:查看Centos服务器用户可以创建的最大线程数、查看系统内核支持的最大线程数、查看系统支持的最大进程数、设置最大线程数限制、查看进程使用的线程数

大数据系列之:查看Centos服务器用户可以创建的最大线程数、查看系统内核支持的最大线程数、查看系统支持的最大进程数、设置最大线程数限制、查看进程使用的线程数 显示当前用户的资源限制查看用户可以创建的最大线程指定进程的资源限制查看系统内核支持的最大线程数查看系统支…

React 入门第八天:性能优化与开发者工具的使用

随着对React的逐步深入&#xff0c;我开始关注如何优化React应用的性能&#xff0c;特别是在复杂的组件树和频繁的状态更新中保持应用的高效性。这一天&#xff0c;我集中学习了React中的性能优化策略&#xff0c;并探索了如何使用React开发者工具来调试和优化应用。 1. 组件的…

续:当有数据时添加slave2

【示例】 另启一台虚拟机&#xff0c;作为mysql3. 新的虚拟机没有mysql软件包&#xff0c;如何才能快速部署&#xff1f;通过mysql1. mysql1&#xff1a; [rootmysql1 ~]# rsync -al /usr/local/mysql/ root172.25.254.166:/usr/local/mysql The authenticity of host 172.25…

Java算法之快速排序(Quick Sort)

快速排序&#xff1a;分而治之的高效排序算法 简介 快速排序是一种分而治之的排序算法&#xff0c;由C. A. R. Hoare在1960年提出。它通过选取一个元素作为"基准"&#xff08;pivot&#xff09;&#xff0c;然后重新排列数组&#xff0c;使得所有比基准值小的元素都…

【软考】【多媒体应用设计师】媒体与技术

1. 多媒体技术改变了传统循序式模式&#xff0c;用户可以借助超文本链接等方式&#xff0c;更自由灵活地访问所需的信息&#xff0c;体现了其&#xff08; &#xff09;的特点。 A.控制性 B.非线性 C.集成性 D.实时性 答案解析&#xff1a;本题考查信息多媒体非线性特点。多媒体…

安防监控/软硬一体/视频汇聚网关EasyCVR硬件启动崩溃是什么原因?

安防视频监控EasyCVR安防监控视频系统采用先进的网络传输技术&#xff0c;支持高清视频的接入和传输&#xff0c;能够满足大规模、高并发的远程监控需求。EasyCVR平台支持多种视频流的外部分发&#xff0c;如RTMP、RTSP、HTTP-FLV、WebSocket-FLV、HLS、WebRTC、WS-FMP4、HTTP-…

vue part 5

生命周期 <!DOCTYPE html> <html><head><meta charset"UTF-8" /><title>引出生命周期</title><!-- 引入Vue --><script type"text/javascript" src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js&quo…

进程、线程的区别

进程&#xff08;Process&#xff09;和线程&#xff08;Thread&#xff09;是操作系统中的基本概念&#xff0c;它们在资源管理和任务执行方面有着本质的区别&#xff1a; 定义&#xff1a; 进程&#xff1a;进程是操作系统进行资源分配和调度的一个独立单位。每个进程都有自己…

ArcGIS Pro 3.1下载分享

在使用了很长一段时间ArcGIS Pro 3.0之后&#xff0c;终于迎来了ArcGIS Pro 3.1的更新&#xff0c;这里为你分享一下ArcGIS Pro 3.1的安装步骤。 软件介绍 ArcGIS Pro 3.1 是由Esri发布的地理信息系统 (GIS) 软件的较新版本&#xff0c;作为 ArcGIS 桌面应用程序家族中的核心…

【递归深搜之记忆化搜索算法】

1. 斐波那契数 解法一&#xff1a;递归 class Solution { public:int fib(int n) {return dfs(n);}int dfs(int n){if(n 0 || n 1)return n;return dfs(n - 1) dfs(n - 2);} }; 解法二&#xff1a;记忆化搜索 class Solution {int nums[31]; // 备忘录 public:int fib(int …

使用C++,仿照string类,实现myString

类由结构体演化而来&#xff0c;只需要将struct改成关键字class&#xff0c;就定义了一个类 C中类和结构体的区别&#xff1a;默认的权限不同&#xff0c;结构体中默认权限为public&#xff0c;类中默认权限为private 默认的继承方式不同&#xff0c;结构体的默认继承方式为p…

微型直线导轨高精度运行的工作原理

微型导轨是一种用于高精度定位和运动控制的传动装置&#xff0c;常用于微小化、高精密度化的机械设备中&#xff0c;如IC制造设备、半导体设备、高速移载的设备、精密测量、检测仪器、医疗设备、X-Y table&#xff0c;以及高速皮带驱动的设备等小型化设备。 微型导轨的构成相对…

单窗口IP代理设置指南:轻松搞定

在现代互联网生活中&#xff0c;IP代理已经成为了许多人日常上网的必备工具。单窗口IP代理是一种非常实用的代理方式&#xff0c;它允许你在同一个浏览器中为不同的窗口设置不同的IP地址&#xff0c;从而更好地保护隐私和实现多任务处理。今天&#xff0c;我们就来详细讲解一下…

在 macOS 上升级 Ruby 版本的几种方法

在 macOS 上升级 Ruby 版本通常有几种方法&#xff0c;以下是一些常用的方法&#xff1a; 使用系统自带的 Ruby: macOS 系统自带 Ruby&#xff0c;但通常不是最新版本。可以通过终端使用 softwareupdate 命令来更新系统自带的 Ruby。 使用 Homebrew: Homebrew 是 macOS 的包管…

字符串地指针表示方式

每日诗词&#xff1a; 人生自是有情痴&#xff0c;此恨不关风与月。 ——玉楼春尊前拟把归期说 【宋】欧阳修 目录 数组本身的值和数组储存的值一样吗 char[]和cahr*的区别 1. 类型 2. 内存分配 3. 使用方式 4. 字符串字面量 实例 变式 总结&#xff1a; 下期预告&a…