uni-app 引入iconfont矢量图不显示

最新推荐文章于 2026-03-24 09:19:06 发布
原创 最新推荐文章于 2026-03-24 09:19:06 发布 · 4.2k 阅读 · 8 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css #js #vue

uni-app 引入iconfont矢量图不显示

第一种方式在线使用icongont矢量图

打开阿里矢量图网站选择需要的图标

在这里插入图片描述

点击 点此复制代码 将此代码放到一个指定的css文件中

注意点：在线使用矢量图一定记住加上“ https: ”
在这里插入图片描述

然后在APP.vue引入CSS文件

注意scoped属性一定不要写，scoped是为了避免其他页面样式命名重复的问题，所以一旦加上该属性，就会导致矢量图无法显示
在这里插入图片描述

第二种方式本地使用iconfont矢量图

下载矢量图资料包并解压

在这里插入图片描述

将文件需要的文件放到自己制定的文件下

在这里插入图片描述
选择文件后需要在iconfont.css中使用~@进行绝对路径匹配
在这里插入图片描述

在APP.vue文件中引入

在这里插入图片描述

使用

在这里插入图片描述

完美展现

在这里插入图片描述
阿里矢量图官网

uni-app引入iconfont矢量图各种坑
lawliet
11-01 6722
uni-app 是什么 uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。 目前可以打包成Android、IOS的App、小程序 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用...
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8766
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
记录uni-app开发微信小程序踩过得坑，包括iconfont不显示、v-if插槽上不生效、pdf在线预览等
qq_38118138的博客
12-30 6927
记录uni-app开发微信小程序踩过得坑，包括iconfont不显示、v-if插槽上不生效、pdf在线预览等
iconfont 阿里巴巴矢量图标库 引入图标不显示
ChaoChao66666的博客
03-21 3425
问题： 在前端用如下代码引入iconfont时，发现图标没有被引入到界面中 <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-gengduo-shuxiang"></use> </svg> 原因： 可能是如下图所示导致的： 点击更新 将新的链接引入到前端中 ...
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 9823
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 5609
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
iconfont 在 uni-app 项目中的完整使用指南
最新发布
lieyanfeiniao_的博客
03-24 718
本文详细介绍了在uni-app项目中使用iconfont图标库的完整流程。首先在iconfont官网搜索并下载所需图标资源，然后将文件复制到项目static目录下，修改字体路径并全局引入样式。通过demo_index.html查看图标类名后，即可在页面中使用class名称显示图标，并通过内联样式或CSS设置大小和颜色。文章还建议创建图标测试页面以便查看效果，提供了从资源获取到实际应用的全套解决方案，帮助开发者轻松扩展uni-app项目的图标库。
如何UNI-APP中使用iconfont彩色图标
weixin_45319327的博客
07-28 3470
uni-app使用彩色iconfont图标
uni-app（一）----引入阿里云矢量图标库
chongzi的博客
10-11 3001
这段时间因为老师要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 下载图标 首先去官网选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 在Hbuilder中你创建的项目里新建一个css文件，将刚刚在浏览器打开的样式复制进去： 接下来就在App.vue中引入： 然后在布局中使用： <icon class="ico.
uniapp中阿里图标库不能使用
qq_39406353的博客
06-17 889
另外，有些开发者可能会把阿里图标库的CSS文件放在项目的公共CSS中，这也可能会导致阿里图标库无法使用。这是因为公共CSS文件可能会被不同的组件或页面同时引用，而阿里图标库的CSS文件中可能包含了一些全局定义的样式，导致组件或页面之间相互干扰。总之，阿里图标库不能使用是一个比较常见的问题，在实际开发中需要认真分析问题的原因，并寻找合适的解决方法。今个刚开始学习uniapp，想着引入个自定义的阿里图标库吧，发现引入了一直不起作用，一直以为是自己的错误，最终发现并不是。@import”或“<link>"
解决uniapp打包运行在真机上时，图片无法正常显示的问题
ven_cy的博客
12-07 1万+
解决uniapp程序打包运行在真机上时，图片无法正常显示的问题
uniapp引入阿里图标不能正常显示只显示字符
weixin_42564841的博客
06-26 813
uniapp引入阿里图标不能正常显示只显示字符
Uniapp 开发微信小程序使用 Iconfont 底部 TabBar 不显示问题
不二菜菜子的博客
05-08 1851
如果问题仍未解决，可以检查微信开发者工具的控制台是否有相关错误提示.确保图标路径正确，微信小程序要求路径必须从项目根目录开始。如果图标尺寸过大或过小，可能导致显示异常。：部分问题在开发者工具中可能不显现，务必真机测试。将 Iconfont 下载为 png 格式。最大不超过 200px * 200px。标准尺寸：81px * 81px。：正常状态和选中状态，放在。选中状态有明显视觉差异。
修复 uni-icons 自定义图标无法显示的问题
ZhangLei280的博客
12-22 3623
uni-app uni-icons H5端无法显示的问题
uni-app引入自定义图标库——Iconfont-阿里巴巴
star_of_science的博客
09-02 3222
uni-app官方提供的图标库很少，今天来介绍一下如何引入自定义图标库，介绍如何使用阿里巴巴矢量图标库
uni-app引入iconfont的坑
热门推荐
lawliet
11-01 1万+
uni-app 是什么 uni-app 是一个借鉴&amp;amp;nbsp;Vue.js、小程序、mpVue&amp;amp;nbsp;开发跨平台应用的前端框架。 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。 目前打包成Android，IOS的App，虽然能编译到小程序，但是好像还不能打包成小程序，官方文档好像也没查到 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，这倒不可怕，关键这...
uni-app关于自定义iconfont 本地引入 和 线上引入的两种方式
徐子厚的博客
10-09 1949
一、自定义iconfont 阿里巴巴矢量图标库https://www.iconfont.cn，创建项目，查找图标加入购物车后添加进自建项目内 二、线上引用 先点刷新提示红字后刷新在线代码，然后将代码复制黏贴进自己的iconfont.css文件内 重点是地址前面要加https: 定义单个icon 页面内使用及css样式控制 <view class="iconfont icon_refresh"></view> <style scop...
uni-app 图标库整合最佳实践：使用 iconfont 构建属于自己的图标库
前端梦工厂
11-06 4287
阿里巴巴矢量图标库是一种图标字体库，它将图标转换为字体的形式，并通过unicode编码进行引用。通过使用iconfont，开发者可以使用字体图标代替传统的图片图标，以提高网页加载速度和图标的灵活性。iconfont中的图标可以使用 CSS 进行样式控制，并且可以根据需要进行缩放、颜色调整等操作，非常方便。官方链接：iconfont - 阿里巴巴矢量图标库通过本篇文章，我们了解了在前端项目中使用 iconfont 自定义图标库的方法和步骤。
在uni-app项目中简单使用iconfont字体图标
yanyunqi02的博客
05-13 5260
简单的使用iconfont图标
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值