vue如何使用iconfont

已于 2024-05-14 17:56:58 修改
阅读量744 收藏 3
点赞数 2
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-06-05 11:16:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35669498/article/details/125116371
版权

vue如何使用iconfont

1. 搜索想要的图标并加入购物车

在这里插入图片描述
。

2. 点开购物车下载代码

在这里插入图片描述

3. 解压文件夹

在这里插入图片描述

4. 打开vue文件，新建一个文件夹

在这里插入图片描述

5. 将压缩后的文件复制进去

在这里插入图片描述

6. 将次css文件引入全局

在这里插入图片描述

7. 查看iconfont.css

在这里插入图片描述

8. 使用iconfont

在这里插入图片描述

9. 查看效果

在这里插入图片描述
注：此方法无法显示多色图标，若要显示多色图标，下面介绍第二种方法。

10. 可以更改css样式

在这里插入图片描述
其效果如下：
在这里插入图片描述

11. 第二种引入方法

找一个你喜欢的图标，点击下载，再点击复制SVG代码，即可用
在这里插入图片描述

12. 其效果显示

在这里插入图片描述

_咸蛋.
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue项目使用iconfont的最佳实践
08-12
vue项目使用iconfont的最佳实践
vue-iconfont-component：一个使用iconfont的Vue组件
02-04
vue-iconfont-component 使用的Vue组件iconfont如何使用？ npm install vue-iconfont-component --save例< template> < vue xss=removed xss=removed xss=removed> < / vue-iconfont >< / template >< ...
Vue如何使用iconfont（阿里图标库）
weixin_48398799的博客
08-29 5992
1、在iconfont上任意方式登录 2、选择图标管理下，我的项目 3、新建一个项目（如果已有项目可忽略） 4、创建好之后就可以找自己要用的图标，添加到自己的项目里 5、图标添加完毕后，再次回到我的项目里就可以看到自己的图标了 6、选择下载至本地，解压之后可以看到这些文件 7、把选中的文件（其他的可以不用）放到自己项目所需要的文件夹下 8、然后在main.js中全局引入对应的css文件 // 阿里图标库 import "@/assets/iconfont/iconfont.css"; 9
vue项目中引入iconfont，初学者必看
最新发布
2401_84097427的博客
04-04 1214
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 4709
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 7145
Vue 中 iconfont 使用
Vue - 项目中使用iconfont（阿里图标库）
技术共享，共同进步！
07-17 1万+
Vue - 项目中使用iconfont（阿里图标库）
vue中使用iconfont
m0_37714008的博客
06-15 9007
iconfont使用
vue iconfont阿里图标库的三种使用方法
GKISX1216的博客
05-20 4845
1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。 <i class="iconfon..
vue项目中使用iconfont阿里图标库
cjxIt的博客
08-17 820
5.在vue项目中 css新建一个文件夹 把 图4解压后的复制到css目录下 如下图。6.在vue入口mian.js中引入 图4的 iconfont.css 如下图。2.根据搜索选择自己想要的图片 添加到项目中或者新建项目 如下图。7.iconfont.css 里面的内容如下图。3.添加之后如下图 点击下载至本地。4.下载本地解压后的文件如下图。8.在vue各个组件中使用方法。1.进入icon 官网。
Vue之iconfont
c_x_m的博客
12-14 971
由于两个地方的iconfont.css文件中的字体命名都是"iconfont"，而且样式命名也是相同的，导致问题的出现。：由于我是因为自己的iconfont的与luckysheet的iconfont冲突，所以我全局替换了。（如果没有项目，请先到 资源管理->我的项目->点击新建项目）：新建/编辑iconfont项目时，如下红框所呈现的部分，【(font family ) (前缀)(图标名称)】5.将下载到本地的zip解压，复制到项目中。2.搜索想要的图标，加入购物车。2.将引入的图标 从。
在vue项目中正确使用iconfont的方法
10-17
今天小编就为大家分享一篇在vue项目中正确使用iconfont的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-iconfont：更优雅地使用Iconfont.cn，同时支持font-class♡和symbol丨
02-05
安装# Yarnyarn add vue-iconfont# npmnpm i vue-iconfont CDN： | （可通过window.VueIconfont使用）使用首先用Vue.use安装VueIconfont ： import Vue from 'vue'import VueIconfont from 'vue-iconfont'Vue ....
vue前端项目引入iconfont阿里图标的四种方式
热门推荐
qq_35430000的博客
02-12 2万+
一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 http://www.iconfont.cn/home/index 二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式） 进入项目以后会看到阿里云可以选择三种方式进行导入图标 （1）unicode unicode的主要的特点是 优势 ①兼容性最好，支持ie6...
vue3使用iconfont
m0_48799309的博客
09-13 440
得到压缩包解压放到项目中，一般都放到assets文件夹下。
vue3项目中使用iconfont图标
黄钢的博客
12-05 1947
写前端项目时，经常要用到iconfont图标，我最原始的方法是吧iconfont图标下载为png/svg文件，然后在文件中作为资源引入，后来发现这么搞太不专业了记录一下相对比较靠谱的使用方法。
vue中iconfont的使用
......
08-17 117
【代码】vue中iconfont的使用。
vue中iconfont的几种使用方式详解
jjw_zyfx的博客
03-31 787
vue中iconfont的几种使用方式详解
vue 使用iconfont
09-10
Vue可以使用iconfont来显示图标。有几种不同的方式可以实现这个功能。一种方式是使用unicode码表示图标，这种方式比较不友好，需要去iconfont项目查询unicode码并在代码中使用。另一种更友好的方式是使用类似于font-awesome的封装，通过添加class来调用图标。这种方式利用before伪元素来显示图标。还有一种方式是使用symbol方式，这种方式支持多色图标。根据我的经验，在调试时先使用在线方式调试确认无误后再下载到本地使用，这样可以提高效率。所以，Vue可以使用iconfont来显示图标，可以根据具体需求选择合适的方式进行使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_咸蛋.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值