如何在uni-app使用iconfont

最新推荐文章于 2025-10-10 08:48:05 发布
原创 最新推荐文章于 2025-10-10 08:48:05 发布 · 689 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web app

本文详细介绍了如何在阿里巴巴矢量图标库中收藏图标、下载代码并集成到项目中的步骤，包括两种引入方式及常见问题解决方法。

  1. 在阿里巴巴矢量图上收藏自己需要的图标
    在这里插入图片描述

  2. 去到我的收藏,将图标添加入库
    在这里插入图片描述

  3. 在右上角点击购物车图标, 选择添加至项目
    在这里插入图片描述

  4. 在我的项目中将代码下载到本地在这里插入图片描述

  5. 这时会得到一个压缩包,只要将里面的iconfont.css,放入common文件夹; 然后回到阿里巴巴矢量图新建的项目中点击 查看在线链接 在点击生成代码 效果如第四步 将代码复制, 粘贴到iconfont.css,并在//at前面加上http:在这里插入图片描述

  6. 在要使用的页面中引入
    在这里插入图片描述
    在这里插入图片描述

这里是第二种方式

将下载下来的压缩包安照下图操作
在这里插入图片描述
在main.js中引入,就可以使用了(在uniapp中真机测试是不支持这样引入的,只能在style中引入)

import './static/iconfont/iconfont.css';

这样的引入方式会出现有的文件找不到的情况,这是只需将第4步中图片的代码,复制替换iconfont.css文件中的部分尽可以了

@import '../../static/iconfont/iconfont.css';

效果图
在这里插入图片描述

HXH_csdn
关注
在UniApp中如何使用Iconfont
RaAutoit的博客
09-27 1381
本文将详细介绍在UniApp中使用Iconfont的步骤，并提供相应的源代码示例。通过获取Iconfont图标库，导入图标字体文件并配置全局样式，你可以轻松地在UniApp项目中使用各种矢量图标。将下载的Iconfont图标文件解压，你会得到一个包含字体文件（例如.ttf或.woff）和一个样式文件（例如.css或.scss）的文件夹。根据你在Iconfont官网选择的图标，修改类名即可展示不同的图标。在上面的示例中，我们使用了名为"heart"的图标，并将其样式设置为24像素大小和黑色。
uniapp使用iconfont字体图标
i_am_a_div的博客
03-11 1324
情景1：使用灰色的字体图标 步骤1：下载iconfont 步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下 步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除 删除前的css： 删除后的css： 步骤4：引入： 注意:src字段的url的括号内一定要使用单引号 ①引入位置：你可以直接在app.vue内引入；也可以在main.
在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8526
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
uniapp 使用iconfont
weixin_46814321的博客
08-30 1097
APP.vue中：@import url('/static/iconfont-weapp-icon.css');2）在APP.vue中引入：@import '@/static/font/iconfont.css';main.js中：import './static/iconfont-weapp-icon.css'1）将需要的图标添加到购物车，添加到相应的目标项目，如下图下载。2）将下载的文件解压到项目static文件下。6） 将文件引入到main.js或者APP.vue。----点击enter键执行。
uniapp-x使用内置图标和iconfont图标
最新发布
我的小站：https://oby.ink
10-10 638
uniappx使用内置图标和iconfont图标
uniapp项目如何使用iconfont矢量图
l_1733484690的博客
04-21 2806
uniapp项目如何使用iconfont矢量图
微信开发者工具中正常运行，发布后手机端打开是空白页/thirdScriptError问题/如何在uni-app使用iconfont
qq_38143787的博客
03-17 1649
开发的时候在微信开发者工具中一直都是正常显示，但是在打包的时候，iconfont图标部分不能被打包，报错编译错误88，由于是第一次使用uni-app开发小程序，所以就想着那就先发布看看会不会缺图标，结果发布之后，打开页面发现会是空白页，然后发现有报错信息，如下： thirdScriptError TypeError: Cannot read property 'getElementsByTagNa...
如何解决Uni-app中iconfont图标不显示的问题？
08-29
在uni-app中，需要使用特殊符号`~@`来正确引用静态资源路径[^3]。 - 解决方案：修改iconfont.css中的`src`属性，使用`~@`开头的绝对路径。例如： ```css @font-face { font-family: "iconfont"; src: url('~@/...
uni-app+iconfont 实现星级评分
06-11
要在uni-app中实现星级评分，可以使用iconfont图标库来表示星级评分的五颗星。以下是实现步骤： 1. 在iconfont官网上搜索并下载五颗星的图标，下载完成后解压缩。 2. 将解压缩后的文件中的iconfont.css复制到项目...
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
10-16
1. **设备适配**：使用uni-app的`uni.getSystemInfo`接口获取设备信息，以适应不同平台的屏幕尺寸和状态栏高度，确保布局在各端的正确显示。 2. **顶部透明导航栏**：自定义导航栏模式，通过设置背景透明度，达到在...
uni-app使用iconfont-字体图标
程序员劝退师的博客
08-06 2349
1.挑选需要的iconfont图标 阿里iconfont开源库 2.添加购物车 不亏是做电商的，这里也像购物一样！ 可以多选几个方便后面的测试效果！ 3.下载代码 4.解压文件 5.导入项目 创建static/font目录，将iconfont.css、iconfont.ttf导入到static目录中 6.修改iconfont.css文件 源文件 这时候编译会不通过！会提示svg、truetype、woff…找不到！那就将这几个去掉！ 其他几个报错的文件是没有引进来，那是其他平台兼容问题的，移动端
uni-app 使用 iconfont
u012746918的博客
03-08 1823
根据官网 小于 40kb 的字体文件可以直接本地引用。 　　方法如下： 　　　　首先下载字体文件。 　　　　然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。 　　　　放入到 static 下。 　　　　修改 iconfont.css 文件，如下 　　　　 　　　　左侧红框里是留下的字体文件，右侧是修改 iconfont.css 样式。 　　　　然后，引入 样式文件： 　　　 　　　　最后，就可以在 项目中使用了。 　　　　
uniapp中使用 iconfont字体
hjh15827475896的博客
05-20 898
5. 使用iconfont 使用 iconfont 有两种方式， 一种是 class 方式， 一种是使用 unicode 的方式。5.2 使用 unicode 的方式。5.1 使用 class 的方式。
uniapp使用iconfont图标
wb__jf的博客
10-29 5977
uniapp本身是有icon组件的，但由于icon组件各端表现存在差异，所以我们可以通过使用iconfont的字体图标来弥补这些差异。 第一步：在iconfont官网搜索我们需要使用的图标并添加到购物车 第二步：点击购物车，将图标添加至项目 第三步：点击生成代码 第四步：下载至本地 第五步：将iconfont.css复制到项目static文件夹下，并将iconfont官网生成的代码复制到iconfont.css 第六步：页面引用iconfont.css 第七步：使用iconfont图标.
uni-app如何使用iconfont图标
weixin_44055653的博客
02-14 1064
2.将解压后的文件（如iconfont.css和字体文件）放入uni-app项目的。如果使用iconfont就可以解决这些问题,图标会类似于文字,可以自由调整大小和颜色。在uniapp项目中使用图标,一般会放在static文件夹下,会有两个问题。2.如果图标是png,jpg等格式,如果宽高设置过大会不清晰,影响用户体验。1.下载包含所选图标的iconfont项目文件，并将其解压。3.创建或选择一个项目，将购物车中的图标添加到该项目中。1.如果图标过多,会造成打包项目过大,会影响小程序打包。
uniapp关于iconfont字体图标使用
无
04-29 2526
7、使用代码，主要是引用iconfont icon-search样式，注意u-search的placeholder设置不了样式，所以重写样式处理。5、将包里的iconfont.css和iconfont.ttf文件分别放在以下目录，并在App.vue里引入iconfont.css。6、iconfont.css代码，注意src只保留.ttf后缀名代码，路径设置为iconfont.ttf文件放置路径。1、打开[阿里巴巴矢量图标库](https://www.iconfont.cn/)，选择需要的图标添加到购物车。
uniapp怎么使用iconfont
0的0次方的博客
03-20 266
unicode引用 第一步: 添加需要的图标到购物车，然后添加到自己的项目 第二步: 点击下载至本地，解压复制 iconfont.css 文件到项目里 第三步: 点击复制代码，替换iconfont.css中的@font-face 第四步： 在需要的文件引入iconfont.css文件 @import '../../common/iconfont.css'; 第五步： 使用icon <...
uniapp使用iconfont保姆级教程
热门推荐
latinhui的博客
04-30 1万+
1.背景 uniapp中自带的icon很少，不管哪个UI框架都有这个问题，最好就是引用来自iconfont之类的自定义项目文件，我见过很多项目是将文件直接下载下来使用，弊端是操作麻烦，颜色不可修改，只能用已下载的颜色，最好的方式当然是使用字体文件来实现，这里就详细说下操作流程 2.方案步骤 步骤主要分两块，一块是iconfont上的项目管理，一块是本地uniapp项目中的配置 2.1.iconfont端 iconfont端主要分几步： 1.创建项目 2.选择图标 3导出字体文件 2.2.项目端引用 项目端引
【uni-app】使用iconfont字体
Erin_jwx的博客
08-11 330
第一步 搜索需要的图标，选择图标添加入库 第二步 网页导航栏的右上角点开购物车，查看已入库图标 第三步 新建项目，尽量把同一个项目中用到的图标放在一起 第四步 将图标下载至本地，解压 第五步 将以下两个文件导入到项目的static下 第六步 修改iconfont.css文件 代码如下 @font-face { font-family: "iconfont"; src: url('~@/static/fonts/iconfont.ttf'); } 第七步 在App.vue中引
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值