如何在uniapp项目中使用阿里矢量图标（iconfont）

最新推荐文章于 2025-05-22 17:57:32 发布
最新推荐文章于 2025-05-22 17:57:32 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 小程序 微信游戏 javascript svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45356397/article/details/106574001
本文详细介绍了如何在uniapp项目中引入并使用iconfont图标，包括下载图标源码、放置在静态资源目录、在main.js入口文件中引用以及最终在项目中使用的完整步骤。

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

怎么在uniapp中使用iconfont图标

  • 1.我是这样做的，首先下载自己需要的图标源码，解压到自己的项目目录里面

    1. 放在了静载资源目录下面，随便起个名字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6tcy99NR-1591347149503)(https://s1.ax1x.com/2020/06/05/trhZ28.png)]

  • 3.然后再main.js入口文件中引用就行了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-El5IQRPe-1591347149506)(https://s1.ax1x.com/2020/06/05/trhNMF.png)]

  • 4.最后一步就是使用了

在UniApp中如何使用Iconfont
RaAutoit的博客
09-27 1234
本文将详细介绍在UniApp中使用Iconfont的步骤，并提供相应的源代码示例。通过获取Iconfont图标库，导入图标字体文件并配置全局样式，你可以轻松地在UniApp项目中使用各种矢量图标。将下载的Iconfont图标文件解压，你会得到一个包含字体文件（例如.ttf或.woff）和一个样式文件（例如.css或.scss）的文件夹。根据你在Iconfont官网选择的图标，修改类名即可展示不同的图标。在上面的示例中，我们使用了名为"heart"的图标，并将其样式设置为24像素大小和黑色。
uni-app 如何使用svg
热门推荐
BradenHan的专栏
04-27 1万+
在uni-app中使用SVG（Scalable Vector Graphics）可以采用多种方式，以下是几种常见的方法和步骤，包括直接引用、转换为base64编码、作为组件使用等。下面分别举例说明：虽然uni-app本身可能不直接支持标签，但可以通过以下方式间接使用：a. 作为Image组件的源将SVG文件作为静态资源放入项目中，然后通过组件的属性引用。这种方法适用于静态SVG图像。示例： 确保SVG文件（例如）已放置在项目的目录下。b. 作为Background Image如果需要将SVG作为背景图，可以
uniapp怎么使用阿里矢量图标，阿里矢量图标下载，阿里矢量图标应用，改变iconfont，uniapp 引用阿里矢量图标
jp_567的博客
08-21 359
一.图标下载 1. 话不多说上网址https://www.iconfont.cn/ 2.先选择图标加入购物车，记得先登录 3.去购物车，把图标添加到项目，没有项目的创建一个项目（为啥要创建项目不直接下载？答：方便后期修改图标和添加图标） 4.去资源管理点击我的项目，下载到本地。（联网资源会导致微信小程序及app等出现不显示的问题） 解压后的目录如下，现在我就做好准备工作了 二.把图标引入到项目 1.先来看uniapp项目结构 好多开发人员喜欢把资源放在static目录下，其实这样会.
【uniapp】自定义图标symbol组件化
最新发布
Anno_O的博客
05-22 334
组件化图标
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4783
uniapp 使用阿里图标
uniapp项目如何使用iconfont矢量图
l_1733484690的博客
04-21 2604
uniapp项目如何使用iconfont矢量图
uniapp使用阿里icon详细步骤
qq_33444716的博客
03-30 4340
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车，并且点击购物车，添加到相应的项目 2. 找到对应的icon项目，点击下载至本地 3.将红框框起来的文件放到项目中 4. 创建一个iconfont.css，做以下处理 @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('~@/static/font/iconfont.ttf') forma.
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 3154
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2488
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
uniapp 中使用彩色图标，引入阿里图库iconfont
hu104160112的博客
06-18 2094
1.选择symbol模式，下载到本地 2.下载后解压 3.在解压开的文件夹中 shift+右键 打开powershell 窗口 执行代码：npm install -g iconfont-tools 4.然后执行代码：iconfont-tools 然后一路回车 5.文件夹中就多出一个文件 iconfont-weapp 6.把 iconfont-weapp-icon.css 移入你的项目中 7.App.vue中添加以下代码 @import "./common/iconfont-weapp/iconf
解决uniapp使用阿里巴巴矢量图库，在移动端不显示的问题
B2689429488的博客
07-30 1403
icon-font,css
uni-app 怎么在tabbar使用阿里图标库
m0_75269526的博客
06-15 1077
uni-app使用阿里巴巴矢量图标库，uniapp设置tabbar,uniapp提示：微信小图标不支持使用字体图标的方式，只能下载png。
uni-app中使用iconfont
weixin_51198863的博客
02-20 675
前言 uni-app开发的项目是多端通用的，但我们知道每个端对代码的兼容性不大一样； app端不支持在main.js引入的css样式，需要在style中引用； 微信小程序不支持本地的字体图标文件，需要换成网络路径； 为了一套样式多端适用，我们使用下面这种方式来实现 首先打开阿里巴巴矢量图官网 复制图中的代码，那个是网络路径； 在uni-app项目中，app.vue文件下，style中粘贴并修改成如下样式 /*每个页面公共css */ @font-face { font-family: 'icon
uni-app/vue 引入自定义图标库——Iconfont-阿里巴巴
leyu_miss的博客
01-11 543
uni-app引入自定义图标库——Iconfont-阿里巴巴前言1.首先在[官网](https://www.iconfont.cn/)登录注册，选择你需要的图标加入购物车，可以多选2.新建项目，把购物车中的图标添加到项目，然后点击下载至本地3.解压后的文件如图所示，复制iconfont.css文件，粘贴到我们项目的static（或common）目录下，重命名为iconfont.scss(或者直接可以copy过来)4.打开我们复制过来的css文件，把里面引用了但是我们没有复制过来的文件的那几行删除掉（留下da
uniapp使用iconfont的正确的方式
zz18256889177的博客
07-13 276
https://ask.dcloud.net.cn/article/35443
uniapp引用iconfont图标及用法
qq_41556539的博客
07-21 829
引入方法 1.在iconfront-阿里巴巴矢量图标官网找好图标 2.点击复制图标代码 打开找好相对应的图标 点击红圈的复制代码后在网页打开，出现如下： 在项目下新建common文件夹,common文件夹下新建iconfont.css。把iconfont的代码复制到iconfont.css。记住要将iconfont.css文件内url路径转换为在线路径即加上https:如下： **使用方式 ** 1.在App.vue里全局引入该图标文件@import “/common/iconfont
uni-app接入iconfont图标库
weixin_42603332的博客
02-14 237
要在uni-app中使用iconfont图标库，您需要执行以下步骤： 在iconfont官网中选择您需要的图标，并且将它们添加到您的购物车中。 下载您的图标包并解压到您的本地目录中。 在您的uni-app项目中，将iconfont字体文件复制到您的静态资源目录中。 在您的样式文件中，引用iconfont字体文件，并为图标定义样式。 在您的模板文件中，使用字体图标的编码或名称添加图标。 ...
uniapp 使用在线 iconfont 图标
weixin_52063946的博客
12-08 1304
uniapp 使用在线 iconfont 图标
uni-app如何使用iconfont图标
weixin_44055653的博客
02-14 956
2.将解压后的文件（如iconfont.css和字体文件）放入uni-app项目的。如果使用iconfont就可以解决这些问题,图标会类似于文字,可以自由调整大小和颜色。在uniapp项目中使用图标,一般会放在static文件夹下,会有两个问题。2.如果图标是png,jpg等格式,如果宽高设置过大会不清晰,影响用户体验。1.下载包含所选图标的iconfont项目文件，并将其解压。3.创建或选择一个项目，将购物车中的图标添加到该项目中。1.如果图标过多,会造成打包项目过大,会影响小程序打包。
uniapp阿里巴巴矢量图标使用
01-01
为了能够在 UniApp 项目中顺利使用阿里巴巴矢量图标库，需先完成准备工作。访问阿里巴巴图标库网站并挑选所需的图标集，创建个人专属的图标方案。 #### 下载图标资源包 下载所选图标的资源压缩包至本地计算机环境。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值