多语言网站多域名推广,小程序打包成app,一个公司网站备案吗,唱片公司网站模板Vue Element UI 实现权限管理系统 前端篇#xff08;十一#xff09;#xff1a;第三方图标库
使用第三方图标库
用过Elment的同鞋都知道#xff0c;Element UI提供的字体图符少之又少#xff0c;实在是不够用啊#xff0c;幸好现在有不少丰富的第三方图标库可用 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博客
