前端引入阿里图标库的最便捷方式

Posted 2022-09-20 水香木鱼

💌 作者简介

1. 📖 个人介绍：小伙伴们，大家好！我是水香木鱼，【前端领域创作者】😜
2. 📜 CSDN主页：水香木鱼
3. 📑 个人博客：陈春波
4. 🎨 系列专栏：后台管理系统
5. 🌹 一键四连：关注💋+点赞👍+收藏⭐+留言📝
6. 📢 人生箴言：即使没有万全准备，也要勇敢迈出第一步。

---

—📢：相信大家在基于element 或者是vant、iview 等 第三方UI组件库，都会遇到设计稿里的图标，在组件库里没有竟然对应，这时候 iconfont 阿里图标库，就穿越来到了 我们的面前。

我们在引入的时候，会遇到很大的困境；别担心，水香木鱼 来喽，👇助你解决这一问题👇。

---

---

🚋 1、添加入库

将鼠标移动到图标区域，此时弹出 三个图标，购物车图标、收藏图标、下载图标

我们把图标添加入库,找到 需求中的图标，批量添加入库

🪂 2、选择购物车，添加项目

到购物车中,批量添加并加入项目【便于打包下载到本地】

🛸 3、将图标下载至本地

点击font class ，选择下载至本地

🚁 4、解压下载文件

将下载本地的图标，解压并复制font_2540246_16icgbgghtr文件夹

🚀 5、将font_2540246_16icgbgghtr 复制到assets 中

font_2540246_16icgbgghtr 里的文件。

🛫 6、main.js里引入iconfont.css

//main.js
import './assets/font_2540246_16icgbgghtr/iconfont.css' //main.js 全局注册 图标

🌈 7、复制图标class

在font_2540246_16icgbgghtr 里打开demo_index.html 复制图标类名

🪐 8、页面内引用图标

注：必须添加iconfont类

将复制好的图标类名icon-brightness添加到i 标签内

<div class="iconBox">
	<i class="iconfont icon-brightness"></i>
</div>

附加：我们如果需要修改图标的大小，可以在外层包裹div标签，以外层iconBox 为基准【推荐】

.iconBox .icon-brightness
	font-size: 30px

最终页面展示效果：一👇

📖 博主致谢

感谢大家阅读到结尾，本次的文章就分享到这里，总结了【前端引入阿里图标库的最便捷方式】，希望可以帮到大家，谢谢。

如果您觉得这篇文章有帮助到您的的话不妨【关注+点赞+收藏+评论+转发 】支持一下哟~~😛您的支持就是我更新的最大动力。👇👇👇👇👇👇

---

🛩往期精彩：

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

史上最全的Vue生命周期钩子函数11个

一文图解前端WebSocket 实时通信

最详细的教程，教你如何彻底关闭Chrome浏览器自动更新

如何使用csdn里的自定义模块管理专栏，看这一篇就够了。