前端开发——图标处理与引用
文章平均质量分 91
前端开发中常用图标库如Font Awesome、Iconfont等,通过CSS或SVG引入使用,可提升界面美观和用户体验。
该专栏将介绍如何在前端开发中引入这些图标库中的精美图标。
DTcode7
专注于《前端开发》、《微信小程序》领域 ,同时WEB开发、小程序开发、AIGC、IT信息化等领域摸爬滚打多年,深谙网页js,上班摸鱼、自动化打工等领域。略懂的前端开发、数据库、油猴脚本、Vue等框架,具备一定实操经验。让学习成为一种习惯,与君共享,携手共进!
我没有把枪口对向妇孺,而是选择对向自己。紧紧握住的是人性中的野蛮,涌溅出的是精神之海的浊秽。风雨大作之后呆滞的眼神是我最后倔强。让我们把握住贤者时间疯狂学习,努力提升自己!
展开
-
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 · 831 阅读 · 0 评论 -
vue引用阿里彩色图标(symbol引用)
引用阿里图标库的方式有三种,前两种都只能引入单色的图标,对于强迫症简直了,所以俺参考其他大佬的博客,学习了如何通过symbol引用彩色的图标第一步:在阿里图标库选择好自己要的图标,加入购物车,添加至项目,下载到本地这样就把样式文件下载到本地了第二步:在vue项目里面创建对应的inconfont文件夹将这些下载的样式文件放到新建的文件里,方便项目中引用第三步:在main.js中,引入这几个文件(前两个是阿里图标文件,最后一个可以不要,只是自己设置的基础图标宽高等),目的是为了让全...原创 2021-09-16 09:58:40 · 5815 阅读 · 2 评论 -
引入阿里icon库的方法(font-class 引用)
另外,建议在使用阿里矢量图标库前仔细阅读相关文档和许可证,确保符合相关要求和规定。想要让全局都能使用这些图标,还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件:可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件,通常是以。解压缩文件:将下载的阿里矢量图标库文件解压缩到本地目录中,得到一系列图标文件(通常是。所以,在class中粘贴对应图标的类名,就能在页面中看到对应的图标了。选择自己想要的图标,添加到购物车,选择【添加至项目】是阿里矢量图标库中对应图标的类名。原创 2021-09-15 16:22:09 · 7502 阅读 · 1 评论