uniapp如何引入iconfont图标库

最新推荐文章于 2025-03-16 00:43:42 发布
最新推荐文章于 2025-03-16 00:43:42 发布
阅读量2.2k 收藏 8
点赞数 10
分类专栏： uniapp 文章标签： css html5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45018844/article/details/120757230
版权
本文介绍了如何在uniapp项目中引入iconfont图标库，包括从iconfont官网选择图标，创建CSS文件并复制样式代码，最后将CSS引入项目，并成功应用于微信小程序。

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

第一步：

你得拥有一个uniapp项目
在这里插入图片描述

第二步

点击iconfont官网
在这里插入图片描述
在首页选好图标，在项目中新建一个css
在这里插入图片描述
将上面的1复制在css中，再点开下面这个链接
在这里插入图片描述
在这里插入图片描述
再复制这个&

了解本专栏 订阅专栏 解锁全文 超级会员免费看
uniapp/vue 引入iconfont并动态修改icon颜色
搬砖小鱼，请多指教呦
05-24 1万+
一、引入iconfont iconfont官网： iconfont-阿里巴巴矢量图标库 1-选择想要的icon至购物车 2-添加至自己的项目 3-这里我选择的font，属于个人喜好，觉得更方便，还有其他方式选择，步骤差不多，点击生成代码，下载至本地（当然你也可以选择在线使用） 4-将iconfont.css等添加至自己的项目 5-在main.js中引入css文件 至此就可以使用我们的iconfont 使用方法如下 在iconfont.css中有我们下载的icon名..
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 3072
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uniapp项目或者vue项目引入阿里图标库
最新发布
weixin_51591826的博客
03-16 576
在官网把新添加的图标加入项目，然后下载文件，更换掉项目之前的文件，注意路径要修改为绝对路径。回到首页，对想要的图标进行搜索，会出现一大批相关的图标，选中符合需求的图标并添加入库。确定添加之后会跳转到我的项目这里，选择font class，然后下载到本地。如果新图标没有渲染成功，则可能是缓存的原因，可以重启项目，一般就可以解决了。入库成功后，可以在导航栏点击购物车图标进行查看并添加到刚刚新建的项目当中。登录完成之后点击资源管理中的我的项目。
uni-App引入iconfont
weixin_34150224的博客
11-01 1669
uni-app 是什么 uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。 通过编写 一套代码，将其编译到iOS、Android、微信小程序等多个平台。 目前可以打包成Android、IOS的App、小程序 有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用，我也懒得入坑 网上的教程很少，就连简...
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 5353
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
uni-app如何使用iconfont图标
weixin_44055653的博客
02-14 647
2.将解压后的文件（如iconfont.css和字体文件）放入uni-app项目的。如果使用iconfont就可以解决这些问题,图标会类似于文字,可以自由调整大小和颜色。在uniapp项目中使用图标,一般会放在static文件夹下,会有两个问题。2.如果图标是png,jpg等格式,如果宽高设置过大会不清晰,影响用户体验。1.下载包含所选图标的iconfont项目文件，并将其解压。3.创建或选择一个项目，将购物车中的图标添加到该项目中。1.如果图标过多,会造成打包项目过大,会影响小程序打包。
Uniapp在Vue环境中引入iconfont图标库（详细教程）
驴大毛的博客
11-01 1413
Uniapp在Vue环境中如何引入iconfont图标库的详细教程
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
UniaApp引入Iconfont
weixin_41562028的博客
08-31 799
官网把这个代码复制下来,替换iconfont.css的这段代码。通过以上步骤，就可以在 UniApp 项目中成功引入并使用。是你在阿里巴巴矢量图标库中对应的图标的类名。在页面的模板（template）中，通过。直接下载png使用即可。
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8009
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp引入阿里图标库
active_pig的博客
10-04 1654
平时项目开发肯定少不了图标的使用，除了自己定制图标库之外，再一个比较不错的就是使用阿里的图标库，这里包含了很多分类的图标，基本上你想用的图标它都有，不仅好看，使用起来也是非常方便的，下面一起来看看吧。你进入这个官网以后，挑选自己喜欢的图标后添加到自己的项目中，没有项目的随意建一个新的，新图标首先先加入购物车，然后到时候一块添加到项目中。这个就是图标的代码，每个不同的图标都不一样，这个可以自己尝试一下。官网地址：https://www.iconfont.cn/
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2299
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
uniapp引入iconfont图标
06-28
要在uniapp中引入iconfont...注意：如果需要使用多个iconfont图标库，需要将它们的字体文件和css文件分别放在不同的文件夹中，并在App.vue文件中分别引入。同时，不同的图标库可能会有相同的类名，需要注意避免冲突。
uniapp中如何引入iconfont图标
senyuyin的博客
07-28 474
【代码】uniapp中如何引入iconfont图标。
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 2227
uniapp中引入iconfont
uniapp项目中引入iconfont图标
weixin_52020362的博客
04-09 1037
uniapp引入iconfont图标
Uniapp 添加Iconfont
he_wen_jian的专栏
03-22 1816
1：创建/font/iconfont.css 在线方式： @font-face { font-family: "iconfont"; /* Project id 3266214 */ src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype'); } 离线方式： @font-face { font-family: "iconfont";
在 uni app项目中引入 iconfont (本地引入和在线引入方式)
dongxiaogang5_5的博客
07-05 2293
首先登录 iconfont 官网（https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2） 找到需要的字体图标，如果创建项目组的话，就在–我的项目–点击，下载至本地；如果是直接加入购物车的话，就直接点击下载代码； 这两种方式都会下载一个 压缩文件，解压压缩文件之后，文件目录如下（其中我已经标注了两个文件名）： 将上图中标注的 CSS 文件 复制到项目中的static目录下，也可以是其他路径下，只要引入的时候路径对就ok;打开网址：
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小莉爱编程

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

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

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

打赏作者

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

抵扣说明：

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

余额充值