vue引入icon图标库的方法

最新推荐文章于 2024-07-31 10:50:54 发布
最新推荐文章于 2024-07-31 10:50:54 发布
阅读量4k 收藏 2
点赞数 1
分类专栏： vue学习之路 文章标签： vue图标库引入
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gujinapenggu5/article/details/85231666
版权
在Vue项目中，从阿里图标库创建新项目并选择FontClass/Symbol前缀，避免与Element UI冲突。设置自定义fontFamily，添加所需图标。在代码中通过内联样式引用图标，使用FontClass/Symbol前缀和图标名，或者使用Unicode码。确保重启服务，并检查网络资源加载，解决可能出现的小方块问题。
摘要由CSDN通过智能技术生成

https://www.iconfont.cn/manage/index找到阿里图标库

创建新项目

新建项目------创建----

1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式。

         如果写成这样的前缀，会和element-ui框架所带的图标（icon）冲突，导致你图标显示不出来

2）、fontFamily随便起一个名字，能记住就行

 3）、项目创建完了，你可以往项目里面添加自己想要的图标了, 找到想要的图标添加到购物车，可以通过浏览或者搜索找到自己想要的图标，然后添加到自己的项目，这里有一个坑，千万要记住自己是哪个项目要用，

最低0.47元/天 解锁文章
午夜玫瑰钻
关注
专栏目录
引入阿里icon库的方法（font-class 引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-15 7198
另外，建议在使用阿里矢量图标库前仔细阅读相关文档和许可证，确保符合相关要求和规定。想要让全局都能使用这些图标，还需要在app.wxss文件中引入这个iconFont.wxss文件。下载阿里矢量图标库文件：可以从阿里官网或其他可靠来源下载阿里的矢量图标库文件，通常是以。解压缩文件：将下载的阿里矢量图标库文件解压缩到本地目录中，得到一系列图标文件（通常是。所以，在class中粘贴对应图标的类名，就能在页面中看到对应的图标了。选择自己想要的图标，添加到购物车，选择【添加至项目】是阿里矢量图标库中对应图标的类名。
vue 下引入图标库
加油小伙子
08-12 1223
图标库的使用
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
[vue]Vue Element使用第三方icon图标教程详解
最新发布
lingrer的博客
07-31 414
将以下代码加进去，注意： el-icon-third 是你之前设置的icon前缀，第二个 el-icon-third前边有空格的。前缀注意，不要跟element-ui自带的icon(前缀为：el-icon)重名了。在src下的assets下新建一个icon文件夹，将下载的所有文件都复制粘贴。解压后你会得到这些文件，打开iconfont.css。选择 Font class 下载至本地。复制代码可获得一个class类名。在购物车当中选择添加至项目。在main.js当中引入。
vue + ant 项目引入在线的icon图标
weixin_43845137的博客
10-30 2446
目录 先在icon找到对应的图标，然后生成在线链接 https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2160051 然后在src 目录下创建 assets文件 - css - iconfont.css 在 iconfont.css 文件中，引入在线字体图标 @import 'http://at.alicdn.com/t/font_2160051_voigx1b9vp.css'; 在main.js
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 1756
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
vue icon 图标库
zyx的博客
11-09 8327
http://www.iconfont.cn/
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
在Vue中使用icon 字体图标的方法
12-02
本篇文章将详细介绍如何在Vue中使用阿里Iconfont图标库，以及两种不同的使用方法：在线引入和本地化部署。 1. **在线使用阿里Iconfont图标库** - **步骤1**：访问阿里Iconfont官方网站（http://www.iconfont.cn/）...
vue项目引入图标
范特西的博客
07-12 301
1.Symbol SVG图片格式 拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件 加入通用css代码（引入一次就行）.icon { width: 1.1em; height: 1.1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } 挑选相应图标并获取类名，应用于页面<svg class="icon" aria-hidden
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
vue 引入图标库
山外小楼
07-09 6023
1.打开阿里图库，创建一个项目，再去寻找自己想要的图标，最后下载至电脑。2.打开下载的文件包，如下图3.将里面的部分文件拷贝至你的项目中，在static 目录下创建一个文件夹fonts,如下图4.打开iconfont.css,往里面添加代码如下，[class^="icon"], [class*=" icon"]/*这里有空格*/ { font-family: "iconfont" !importa...
vue2 引入阿里图标库iconfont
努力
02-29 930
阿里 iconfont 使用方法
vue2 有什么比较简单好用的图表库
weixin_42600407的博客
01-07 414
有很多比较简单好用的图表库可以在 Vue 中使用。其中一些比较流行的选择有： ECharts：一个功能强大、可扩展的图表库，支持大多数常用的图表类型，并且有丰富的 API 和主题。 vue-echarts：一个基于 ECharts 的 Vue 封装库，可以很方便地在 Vue 中使用 ECharts。 vue-chartjs：一个基于 Chart.js 的 Vue 封装库，支持大多数常用的图表类型...
Vue学习(二) Vue Element使用第三方icon图标教程详解
炫爱小七的博客
01-21 2796
Vue Element使用第三方icon图标教程详解原帖1.打开阿里icon，注册 &gt;登录&gt;图标管理&gt;我的项目&gt;新建项目 原帖 链接: https://www.jb51.net/article/134630.htm. 1.打开阿里icon，注册 &gt;登录&gt;图标管理&gt;我的项目&gt;新建项目 新建项目 项目名称随便写。前缀注意，不要跟element-ui自...
【vue2】vue引入阿里矢量图标iconfont以及引入lodash插件
????鱼干～
03-26 1977
【vue2】vue引入阿里矢量图标iconfont以及引入lodash插件
Vue项目中优雅使用icon
qq_43430453的博客
01-07 1325
前言icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用s...
npm 安装第三方图标库
feng的博客
11-10 659
字体库
vue引入icon图标
05-01
Vue引入Icon图标是一个实现自定义页面样式和优化用户体验的重要步骤。...综上所述，Vue引入Icon图标的方法有多种，选择合适的方法能够让页面风格更加集中，用户体验更佳，提高开发效率，减少重复工作。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值