前端开发——图标处理与引用
文章平均质量分 91
前端开发中常用图标库如Font Awesome、Iconfont等,通过CSS或SVG引入使用,可提升界面美观和用户体验。
该专栏将介绍如何在前端开发中引入这些图标库中的精美图标。
DTcode7
免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。
本人尊重原创作者或出版方,资料版权归原作者或出版方所有,本人不对所涉及的版权问题或内容负法律责任。如有侵权,请举报或通知本人删除。
展开
-
vue引用阿里彩色图标(symbol引用)-封装自己的icon组件
关于如何引入彩色的阿里图标,请参考另一篇博客:vue引用阿里彩色图标(symbol引用)_五速无头怪的博客-CSDN博客https://blog.csdn.net/black_cat7/article/details/120322471接下来要封装出自己的icon组件,方便使用。第一步:在components文件中新建一个组件(我的叫cjIcon.vue)<template> <!-- symbol方式引用彩色图标,就得这么写 --> <!-- :clas原创 2021-09-16 11:14:39 · 563 阅读 · 0 评论 -
vue引用阿里彩色图标(symbol引用)
引用阿里图标库的方式有三种,前两种都只能引入单色的图标,对于强迫症简直了,所以俺参考其他大佬的博客,学习了如何通过symbol引用彩色的图标第一步:在阿里图标库选择好自己要的图标,加入购物车,添加至项目,下载到本地这样就把样式文件下载到本地了第二步:在vue项目里面创建对应的inconfont文件夹将这些下载的样式文件放到新建的文件里,方便项目中引用第三步:在main.js中,引入这几个文件(前两个是阿里图标文件,最后一个可以不要,只是自己设置的基础图标宽高等),目的是为了让全...原创 2021-09-16 09:58:40 · 4196 阅读 · 2 评论 -
引入阿里icon库的方法(font-class 引用)
另外,建议在使用阿里矢量图标库前仔细阅读相关文档和许可证,确保符合相关要求和规定。想要让全局都能使用这些图标,还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件:可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件,通常是以。解压缩文件:将下载的阿里矢量图标库文件解压缩到本地目录中,得到一系列图标文件(通常是。所以,在class中粘贴对应图标的类名,就能在页面中看到对应的图标了。选择自己想要的图标,添加到购物车,选择【添加至项目】是阿里矢量图标库中对应图标的类名。原创 2021-09-15 16:22:09 · 6203 阅读 · 1 评论