vue项目引入阿里巴巴矢量图标库 ——字体图标

最新推荐文章于 2024-04-04 20:00:51 发布
最新推荐文章于 2024-04-04 20:00:51 发布
阅读量495 收藏 2
点赞数
分类专栏： vue3 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BUG_devil/article/details/126092745
版权

1. 打开阿里巴巴矢量图标库官网

iconfont-阿里巴巴矢量图标库

2. 下载图标步骤

（1）

在这里插入图片描述

（2） 

在这里插入图片描述 （3） 

在这里插入图片描述

（4） 

在这里插入图片描述

（5）

（6）main.js 配置 引入assets中的图标路径

 （7）页面引用图标
注意:所有的类名前面都需要加上iconfont，后面拼上你需要icon的类名

<div class="iconfont icon-xxxx"></div>

 

参考：vue项目引入阿里巴巴矢量图标库 “字体图标” 手把手步骤详解(pc端、移动端都通用)_MFG_666的博客-CSDN博客_vue 引入阿里矢量图

 

BUG_devil
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue 项目引入字体图标报错、不显示等问题
12-02
2、不报错，但是不显示图标字体，出现方框 原因可能有两种： ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里...
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 4153
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
vue iconfont阿里图标库的三种使用方法
GKISX1216的博客
05-20 4819
1、下载方法 1.打开阿里iconfont，记得登录才可以下载，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 ，点击资源管理器=》我的项目 2、选择font class，可以点击下载至本地，也可以生成在线地址 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。 <i class="iconfon..
vue项目中引入iconfont，初学者必看
最新发布
2401_84097427的博客
04-04 1154
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取。
vue中 字体图标引入 - iconfont阿里字体图标库
weixin_42479421的博客
09-10 411
iconfont字体图标引入，fontclass方法
Vue--引入字体图标的方式
eiai007的博客
09-17 2256
vue引入字体图标
vue项目中如何使用阿里的字体图标iconfont
卷发头的鲁智深的博客
03-15 1825
iconfont，自定义阿里字体图标库
vue项目引入Iconfont图标库的教程图解
10-17
主要介绍了vue项目引入Iconfont图标库的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在vue中使用阿里巴巴黑白图标和彩以图标,font-class（黑白小图标）Symbol（彩色图标）可调大小
vue中引用阿里字体图标的方法
08-28
主要介绍了vue中引用阿里字体图标出现错误问题的解决方法，感兴趣的朋友跟随脚本之家小编一起学习吧
Vue项目中如何引入icon图标
08-27
主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下
vue element项目引入icon图标的方法
08-27
主要介绍了vue element项目引入icon图标的方法,本文图文并茂给大家介绍的非常详细，需要的朋友可以参考下
Vue 第三方字体图标引入 Font Awesome的方法
10-17
今天小编就为大家分享一篇Vue 第三方字体图标引入 Font Awesome的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue项目引入字体.ttf的方法
12-09
1、下载所需要的字体，.ttf格式本文以（FZCYJ.ttf 为例） 2、在src下新建common文件，文件夹中包含以下文件 3、打开font.css @font-face { font-family: 'FZCYJ'; //重命名字体名 ...以上这篇vue项目引入字
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中使用阿里字体图标库
qq_45208029的博客
09-05 351
本文基于pink老师和哈默老师的总结 下文的div换成span（或者其他行内标签如i）标签，我就不改了 1.首先进入阿里图标库，并且搜索对应的字体图标加入到购物车，之后添加到项目里（项目需要提前创建或者添加时创建） 2.删除demo文件并且将文件引入到main.js中 3.使用字体图标库的两种方式 3.1引入类名（推荐） 3.2使用content 如果你直接从css文件复制content会缺少几个符号 4.优化代码（只使用第一种引入） 第二个是为了防止出.
Vue项目中引用‘阿里巴巴字体图标库iconfont’
m0_61043185的博客
04-02 719
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
vue项目引入阿里巴巴矢量图标库 “字体图标” 手把手步骤详解(pc端、移动端都通用)
m0_49714202的博客
12-11 807
第一步打开百度搜索阿里巴巴矢量图标库 官方网址:https://www.iconfont.cn/ 然后按图片顺序进行操作就能得到想要展示的字体图标 1. 2. 3. 4. 5. 6. 在main点js中引入(路径要找到解压文件下的iconfont.css文件) 7. 8. 9. 在代码中加上上面图标的类名就可以出来所下载的图标了 注意:所有的类名前面都需要加上iconfont后面拼上你需要icon的类名就ok了 <div class="iconfont icon-xxx">&l
阿里巴巴矢量图标库vue
08-20
阿里巴巴矢量图标库（Iconfont）可以在Vue项目中使用。首先，您需要创建自己的项目图标库。您可以访问https://www.iconfont.cn/并手动创建自己的项目图标库。选中您需要的图标并添加到您的项目中。完成后，点击上方菜单栏的购物车，将图标添加至项目（如果没有项目，则可以新建一个）。接下来，您可以将图标下载到本地。在下载的demo包中，有三种使用方式：Unicode、Font class和Symbol。您可以根据您的需求选择其中一种方式。在Vue项目中，您可以使用Unicode的方式来使用图标。在组件中，您可以使用容器，并添加类名来引用图标。例如，如果您下载的图标是"icon-kaishi"，则可以在Vue组件中添加如下代码来使用该图标： ```html <i class="iconfont icon-kaishi"></i> ``` 您可以根据自己下载的图标名称进行引入，并在需要使用的地方应用即可。如果需要修改图标名称，您可以在iconfont.svg文件中进行修改。希望这可以帮助到您！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue 项目中使用阿里巴巴矢量图标库](https://blog.csdn.net/qq_43894292/article/details/131937182)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）](https://blog.csdn.net/qq_46103732/article/details/128021112)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值