Vue + Element UI 前端篇(十一):第三方图标库

Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库 

使用第三方图标库

用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦。

Font Awesome

Font Awesome 提供了675个可缩放的矢量图标,可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

Font Awesome 5 跟之前的版本使用方式差别较大,功能是强大了,图标也更丰富了,但使用也变得更加复杂了。

本人还是比较喜欢之前的使用方式,安装容易,使用简单,毕竟我的需求也没那么复杂,只是简单的有图标可用就行了。

网上相关介绍很多,这里就不废话了,更多详情参见,官方网址:Font Awesome,一套绝佳的图标字体库和CSS框架

安装依赖

执行以下命令,安装 font-awesome 依赖。

npm install font-awesome --save

项目引入

在项目 main.js 中引入css依赖。

import 'font-awesome/css/font-awesome.min.css'

页面使用

项目引入之后,直接在页面使用就可以了。

测试效果

看到没,就是这么简单,就是这么好用,这也是本人最喜欢的使用方式。

另外还可以选择CDN方式,下载方式等等,这里就不说了,有兴趣自行查阅。

官方网址:Font Awesome,一套绝佳的图标字体库和CSS框架

Font Awesome 5 使用方式可以参考

官方教程:Font Awesome

Noodlewar: vue.js - Vue 使用 Font Awesome 5 - 个人文章 - SegmentFault 思否

iconfont

iconfont 是阿里提供的一个图标库。

官方网址:iconfont-阿里巴巴矢量图标库

登录注册

先到官网注册一个账号登录。

新建项目

选址图标管理,我的项目。

点击右侧新建项目按钮新建一个项目。

输入项目相关信息,注意前缀不要跟项目现有的冲突。

选取图标

进入图标库,选址自己喜欢的图标库。

进入图标库选择自己喜欢的图标加入购物车,因为没有批量加入,一个个点简直要命,在控制台输入以下命令可以批量添加。

复制代码

var icons = document.querySelectorAll('.icon-gouwuche1');var auto_click = function(i) { if (i < icons.length) { 
setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } };auto_click(0);

复制代码

执行以上命令后,命令会自动添加图标到购物车,接下来等它完成就好了。

完成之后,点击购物车,选择添加到项目

下载素材

选择 font class 并下载到本地。

修改配置

解压下载的文件,打开 iconfont.css。

添加以下代码,注意:kt-icon 是之前设置的 icon 前缀,第二个 kt-icon 前边有空格的。

复制代码

[class^="kt-icon"], 
[class*=" kt-icon"]
{ font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

复制代码

 添加注意事项如下图所示。

 项目引入

在项目 assets 下面新建一个图标目录。

在 main.js 中引入 css 样式。

import '@assets/iconfont/iconfont.css'

打开 iconfont 项目,选择图标,复制代码。

 页面引入相关图标 class 代码。

测试效果

启动项目,显示效果如下。

 

iconMoon

iconMoon是另外一个优秀的第三方图标库。

使用说明可以参考:

vue项目中使用iconMoon图标

icomoon的用途以及怎么用_1高_高1的博客-CSDN博客

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

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

相关文章

table 单元格中嵌套子表格 样式撑开问题

如图&#xff0c;表格中的td嵌套表格&#xff0c;里边表格把外层撑开&#xff0c;不能按100%显示&#xff1b; 解决办法 给父级table 加一个table-layout:fixed;样式

SSRF漏洞实战

文章目录 SSRF概述SSRF原理SSRF 危害PHP复现SSRF漏洞检测端口扫描内网Web应用指纹识别攻击内网应用读取本地文件 Weblogic SSRF--Getshell复现SSRF攻击Redis原理漏洞检测端口扫描复现翻车&#xff0c;请看官方复现教程注入HTTP头&#xff0c;利用Redis反弹shell SSRF防御过滤输…

20230908java面经整理

1.cpp和java的区别 cpp可以多重继承&#xff0c;对表java中的实现多个接口 cpp支持运算符重载、goto、默认函数参数 cpp自动强转&#xff0c;导致不安全&#xff1b;java必须显式强转 java提供垃圾回收机制&#xff0c;自动管理内存分配&#xff0c;当gc要释放无用对象时调用f…

算法训练第五十八天

总结&#xff1a;今日事单调栈的开端&#xff0c;还是挺巧妙的。 496. 下一个更大元素 I - 力扣&#xff08;LeetCode&#xff09; 代码&#xff1a; class Solution { public:vector<int> nextGreaterElement(vector<int>& nums1, vector<int>& …

现代C++中的从头开始深度学习:【6/8】成本函数

现代C中的从头开始深度学习&#xff1a;成本函数 一、说明 在机器学习中&#xff0c;我们通常将问题建模为函数。因此&#xff0c;我们的大部分工作都包括寻找使用已知模型近似函数的方法。在这种情况下&#xff0c;成本函数起着核心作用。 这个故事是我们之前关于卷积的讨论的…

OC和Swift混编,导入头文件‘xxx-Swift.h‘ file not found

在OC的项目里加入Swift代码&#xff0c;创建完桥接文件后&#xff0c;需要倒入Swift头文件&#xff0c;头文件的格式为“项目名-Swift.h”。 如下图&#xff0c;我在Xcode上看到我的项目名为YichangPark&#xff0c;导入 #import "YiChangPark-Swift.h" 之后提示 “Y…

喜报 | 再度中标南网项目!AR 开启电力远程运维新智慧

近日&#xff0c;中国南方电网官网发布《2023年南方电网数字平台科技 (广东)有限公司物资品控远程协助软件采购项目中标公告》&#xff0c;ALVA Systems 凭借 ALVA Rainbow 创新应用竞得此标。 随着相关技术的逐步成熟&#xff0c;基础问题远程化解决已经在工业领域广泛应用。 …

NLP(1)--NLP基础与自注意力机制

目录 一、词向量 1、概述 2、向量表示 二、词向量离散表示 1、one-hot 2、Bag of words 3、TF-IDF表示 4、Bi-gram和N-gram 三、词向量分布式表示 1、Skip-Gram表示 2、CBOW表示 四、RNN 五、Seq2Seq 六、自注意力机制 1、注意力机制和自注意力机制 2、单个输出…

9.4黄金行情是否反转?今日多空如何布局?

近期有哪些消息面影响黄金走势&#xff1f;今日黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周一(9月4日)亚市盘中&#xff0c;现货黄金震荡走高&#xff0c;延续上周涨势&#xff0c;一度刷新日内高点至1946.16美元/盎司。周三&#xff0c;ISM将发布服务业P…

同旺科技USB to I2C 适配器烧写 Arduino 模块

所需设备&#xff1a; 内附链接 1、同旺科技USB to I2C 适配器 2、Arduino 模块 硬件连接&#xff1a; 用同旺科技USB to I2C 适配器连接芯片的TX、RX、GND; 打开Arduino IDE编辑工具&#xff0c; 点击“上传”按钮&#xff0c;完成程序的编译和烧录&#xff1b;

基于微信小程序的自习室系统设计与实现,可作为毕业设计

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1 简介2 技术栈3 需求分析3.1用户需求分析3.1.1 学生用户3.1.3 管理员用户 4 数据库设计4.4.1 E…

【数据结构】树的基础入门

文章目录 什么是树树的常见术语树的表示树的应用 什么是树 相信大家刚学数据结构的时候最先接触的就是顺序表,栈,队列等线性结构. 而树则是一种非线性存储结构,存储的是具有“一对多”关系的数据元素的集合 非线性 体现在它是由n个有限结点(可以是零个结点)组成一个具有层次关…

HarmonyOS/OpenHarmony(Stage模型)应用开发组合手势(二)并行识别

并行识别组合手势对应的GestureMode为Parallel。并行识别组合手势中注册的手势将同时进行识别&#xff0c;直到所有手势识别结束。并行识别手势组合中的手势进行识别时互不影响。 以在一个Column组件上绑定点击手势和双击手势组成的并行识别手势为例&#xff0c;由于单击手势和…

JS 防抖和节流的函数应用

1. 防抖函数 <body><button id"myButton">点老子</button> </body></html><script>function ois(fun, time) {let timeoutId;return (...a) > {clearTimeout(timeoutId)timeoutId setTimeout(() > {fun(...a)}, time)}}…

关于实现 Vue 动态数据显示,比如数字 0 或 1 怎么显示为 男 或 女等等的动态显示实现方法

具体 Vue 代码演示&#xff1a; test.vue 文件演示&#xff1a; <template> <!-- 方法一 --> <div>{{ test.data 0 ? 男 : 女}}</div><!-- 方法二 --> <div>{{ test.data 0 ? 男 : }}{{ test.data 1 ? 女 : }}{{ test.d…

Apinto 网关 V0.14 版本发布,6 大插件更新!

大家好&#xff01; 距离上次更新已经过去一段时间了&#xff0c;这段日子里我们一直在酝酿新的功能&#xff0c;本次的迭代将给大家带来 6 大插件的更新~一起来看看有哪些变化吧&#xff01; 新特性 1. 新增 额外参数v2 插件&#xff0c;支持对转发参数进行加密、拼接等操作…

【软件测试】单元测试、集成测试、系统测试有什么区别?

单元测试、集成测试、系统测试有什么区别 1、粒度不同 集成测试bai粒度居中&#xff0c;单元测试粒度最小&#xff0c;系统du测试粒度最大。 2、测试方式不同 集成测试一般由开发zhi小组采用白盒加黑盒的方式来测试&#xff0c;单元测试一般由开发小组采用白盒方式来测试&a…

qt之模态窗口

概念介绍 模态窗口&#xff1a;当一个窗口设置为模态窗口时&#xff0c;该窗口会阻塞用户对该窗口所属应用程序下其它部分进行操作。 非模态窗口&#xff1a;当一个窗口为非模态时&#xff0c;简单的理解就是可以不操作该窗口而去操作该应用程序下其它窗口对象&#xff0c;而…

Spring中添加打印请求头的拦截器

问题 因为最近这个项目没有调用链监控系统的支持&#xff0c;但是&#xff0c;本地PostMan调试的时候又需要请求头才能正常调试。 思路 喊ChatGPT实现一下能够打印所有请求头的拦截器&#xff0c;然后&#xff0c;集成到已有代码即可。 解决 RequestHeaderInterceptor.jav…

基于Python开发的玛丽大冒险小游戏(源码+可执行程序exe文件+程序配置说明书+程序使用说明书)

一、项目简介 本项目是一套基于Python开发的玛丽冒险小游戏程序&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。 包含&#xff1a;项目源码、项目文档等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xf…