Vue 使用 阿里巴巴 iconfont 没有显示问题

最新推荐文章于 2025-04-07 15:52:39 发布
最新推荐文章于 2025-04-07 15:52:39 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vue html 文章标签： vue html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liulang1905/article/details/117019890
版权
本文记录了一次在项目中遇到的小问题：图标无法正常显示。问题在于图标的路径设置不正确，解决方法是将图标文件放置于public目录下并与index.html保持同级。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

记录一次小坑，就是可能路径不对，需要放到public下 和 index.html同级就好了

在这里插入图片描述

<!-- 你的具体路径 这段在你的index.xml中引入，这里引入可以全局使用，如果单独页面也可以单独引入-->
<link rel="stylesheet" href="/icons/iconfont.css">

<!-- 下载后的图标的class  -->
<span class="iconfont icon-zhankai"></span>

如果不知道图标的class，可以打开下载后的文件夹里的 demo_index.html查看
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210519105605337.png#pic_center

在这里插入图片描述

Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 921
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
在vue项目中引入并使用阿里iconfont图标
Zoey_J的博客
12-22 818
打开官网 → 我的项目 → 下载到本地 → 解压缩下载的文件 解压后的文件夹： 将需要的文件拖入项目 将以下几个文件拖入项目，放到创建的文件夹中 将 .css 文件中的路径设置为与文件位置一致 这里我分了 css 和 icon 文件，也可以放一起怎么样都行，只要 .css 文件中的路径写对就没问题。 在 main.js 中引入 引入之后就可以在项目中引用项目中已有的图标了...
【VUE】vue引入iconfont不显示
SZnAl的博客
03-03 3116
引入在线iconfont后页面显示方块 解决方法：在app.vue中引入css样式与在线地址后 在要引入iconfont的页面中，引入iconfont的地方，比如在div里放入iconfont代码，给div添加class：class="iconfont"
vue 本地项目引入阿里图标
最新发布
qq_34273698的博客
04-07 400
i> 标签是语义化的，用于表示图标的意义，而不仅仅是装饰性的。引入我们下载的图标时注意引用的时候前面要加上 iconfont，然后后面指定使用图标的类名，也就是icon-jiang.3 icon-aixin 是从iconfont.css文件中拿到的,这个文件中有这个类,页面上才会显示图标,如果文件中没有这个类,页面中的图标就不会显示.aaa是自己定义的类名,可以设置宽高,这样页面上就可以展示你的图标了.复制内容后,放在一个css文件中,把css文件放在项目中。在入口文件main.js 中引入。
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 5353
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
vue iconfont.css,Vue项目中使用iconfontcss，无法显示正确图标。
weixin_29422145的博客
08-04 1231
因为iconfont是全站使用的。所以将fonts文件夹和iconfont.css文件都放在了一级目录lib下。目录结构为：| lib--| css--| fonts--| iconfont.eot--| iconfont.woff--| iconfont.ttf--| iconfont.css--| animate.css--| images--| jsiconfont.css内配置为：@fon...
Vue中使用iconfont字体图标转译问题导致的不显示
06-06 1334
导入字体图标后，正常使用时可以显示的，但是用到for循环里面，就会导致显示出错： 所以需要对编码进行转译操作：
Vue项目中引用‘阿里巴巴字体图标库iconfont’
2401_84418948的博客
04-29 819
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1050
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
​如何在VUE项目里使用阿里巴巴 iconfont 图标库里的彩色图标（svg图标）
bing103425的博客
07-25 2587
1.打开iconfont，并登录账号 http://www.iconfont.cn/     2.挑选自己喜欢的图标，加入购物车       3.打开购物车 =&gt; 添加至项目 =&gt; 新建项目目录 =&gt; 确定         4.进入我的项目，点击Symbol，点击生成代码       5.将生成的代码引入index.html ...
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
阿里巴巴矢量图标（iconfont）添加后显示不出来的解决办法
热门推荐
weixin_42617604的博客
10-07 3万+
问题: 添加阿里巴巴矢量图标（iconfont）后页面内能看到但是显示不出来： 解决办法: 后面发现地址栏是file://文件打开： 这样是不行的，要使用 iconfont 要在本地的服务器打开才能看到 用git bush进入index.html的文件夹，然后输入 http-server 打开服务器： 再地址栏输入：127.0.0.1:8080 就能看到了 ...
使用vue.js 引用阿里图标 --无法显示（报错）
weixin_30794851的博客
06-08 827
在webpack.config.js配置文件中添加 { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader'} 转载于:https://www.cnblogs.com/fangyinghua/p/9156577.html
vue引入阿里矢量图标库
ningmengbu_suan的博客
10-30 722
1.遇到的问题： 在矢量图标库中引入一个包含多个图标的项目，图标不生效 原因： 引入图标的地方未添加font-family导致引入的图标不生效 在这里插入图片描述
vue引入iconfont不显示
SZnAl的博客
03-02 621
引入在线iconfont后页面显示方块 解决方法：在app.vue中引入css样式与在线地址后 在要引入iconfont的页面中，引入iconfont的地方，比如在div里放入iconfont代码，给div添加class：class="iconfont"
vue使用中icon图标失效问题（已解决）
weixin_50433115的博客
12-17 3262
这是因为从ElementPlus@1.20起icon包改名了，站在要用import {图标名字} from '@element-plus/icons-vue'
springboot项目父工程parent报错，Project build error: Non-resolvable parent POM for model:maven01:0.0.1-SNA
qq_42282321的博客
10-11 1851
springboot项目父工程parent报错，Project build error: Non-resolvable parent POM for model:maven01:0.0.1-SNAPSHOT 所遇到的问题 1.eclipse在创建springboot项目父工程时，导入依赖报错： 2.在maven配置无误的情况下，发现需要在maven的setting.xml里配置阿里云的mirror。 <mirror> <id>CN</id>
本地引入vue、element-ui引入fonts，icon图标不生效问题
roongyan92的博客
07-14 5355
按官方文档，提供了cdn引入和npm安装的方式，但是呢，在网络很差，或没网的的情况下就加载不出来，直接报错啦 我们在本地下载需要的版本文件，直接引入js和css，但是icon图标不显示 修改css中字体图标的路径，发现icon图标还是无法加载 网上资料中的各种办法都不奏效呢，这时候你需要npm安装一下element-ui，然后从他的目录里面把fonts复制出来替换你当前的，就OK啦 ...
Vue 项目webpack打包图标不显示
Amelia_Liu的博客
04-25 2271
第一次用VSCode进行打包一个VUE项目 结果放在直接将dist下面的项目拷贝到spring项目下面一运行发现我的阿里云ico图标都不见了,变成了方框,在苹果方框都不显示 图中的方框都为ico图标 我一检查我在VSCode中都是正常的,唯一差异就是打包出了问题,所以百度...(哈哈 首先百度 因为谷歌太多英文有点费脑) 然后看到这样一个回答 启发到我了,路劲问题 我没问前端打...
vue使用阿里巴巴矢量图
10-12
要在Vue中使用阿里巴巴矢量图，可以使用阿里巴巴的Iconfont图标库。具体步骤如下： 1. 在Iconfont官网上选择需要的图标，加入购物车并下载至本地。 2. 解压下载的文件，将其中的iconfont.ttf文件复制到项目的src/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值