uniapp使用icon图标

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

#vue #css #前端

本文介绍了如何将自定义图标添加到购物车并下载，随后详细阐述了下载后的处理步骤，包括删除冗余文件、将文件放入项目静态资源目录、修改iconfont.css中的路径以及在app.vue中引入。此外，还展示了在组件中使用图标的方法，帮助开发者更高效地管理和使用图标资源。

把自己喜欢的图标放入购物车
在这里插入图片描述
点击添加至项目
在这里插入图片描述
点击确定
在这里插入图片描述点击下载到本地
在这里插入图片描述
下载后是一个压缩包，解压后可以将
在这里插入图片描述
这四个删除掉，然后将文件放到项目的static文件夹里
这时，需要修改iconfont.css里面的路径，用~@来引入本地路径
在这里插入图片描述
若全局使用，可以在app.vue里引入

	@import url("./static/fonicon/iconfont.css");
	/*每个页面公共css */

最后就是想在哪个组件里使用，就可以直接用了
在这里插入图片描述

效果如下：
在这里插入图片描述

在uni-app使用iconfont中的图标
码农键盘上的梦
04-15 8620
1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:
前端VUE【实战】—— antd tree树形控件进行增删改查父子节点
2401_84447362的博客
04-27 1227
具体的效果图如下：直接上代码vue组件新增一级目录
在uniapp中使用icon图标
ybyshezhang的博客
11-13 3763
如何在uniapp中使用icon 1.在iconfont官网找你想要的图标 2.在你的uniapp项目中粘贴这段代码，粘贴在app.vue文件的style标签内 <style> /* icon图标 */ @font-face { font-family: 'iconfont'; /* project id 1920028 */ src: url('https://at.alicdn.com/t/font_1920028_rszv531mqm.eot'); src
uniapp-x使用内置图标和iconfont图标
最新发布
我的小站：https://oby.ink
10-10 718
uniappx使用内置图标和iconfont图标
UniApp icon图标使用和注意事项
wulileaf的博客
11-18 9738
直入主题 icon的图标
在uniapp中如何使用icon图标
renshanxk的专栏
12-15 2万+
在uniapp中使用icon图标的方法：首先注册icon账号，挑选自己中意的图标加入购物车，加入购物车；然后添加到自己的项目中，选择【font-class】在新网址地址栏打开图片文件即可。 在uniapp中使用icon图标的方法： 1.首先注册icon账号 2.挑选自己中意的图标加入购物车，加入购物车 然后添加到自己的项目中 3.在自己的项目中选择font-class 在新网址地址栏打开图片文件 4.把这些文件全部ctrl a c+ v 粘贴到自己项目中icon.scss文件中（建议icon命名以
精选资源
uniapp字体图标的使用
12-31
1. 在uniapp组件中，我们可以通过`<u-icon>`组件来使用字体图标，例如： ```html <u-icon name="logo-ionicons" size="30" color="#007aff"></u-icon> ``` 这里的`name`属性对应字体库中的图标名称，`size`表示图标...
uniapp引入自定义图标
weixin_52102740的博客
07-24 1386
uniapp自定义图标
uniapp+editor图标文件+iconfont.ttf
03-10
uniapp editor富文本编辑器的图标文件
uniapp使用阿里图标库
码农键盘上的梦
07-18 2318
在项目根目录的App.vue中，引入上述的，注意自己存放的路径，且通过@import引入的外部样式，需要写在style标签有效内容中的最前面使用和type属性自定义图标注意因为本质上还是使用的字体，所以多色图标还是不支持的。httpshttpshttpshttpshttpshttps。...
uniapp使用iconfont字体图标
i_am_a_div的博客
03-11 1338
情景1：使用灰色的字体图标 步骤1：下载iconfont 步骤2：解压后只需要将ifonfont.css这一个文件 ，单独的放在你的项目的static>fonts下的某个文件下 步骤3：找到你项目下这个iconfont.css，修改样式，将其他url全部删除，只保留base64的那个url 且这个url最后的逗号,也需要删除 删除前的css： 删除后的css： 步骤4：引入： 注意:src字段的url的括号内一定要使用单引号 ①引入位置：你可以直接在app.vue内引入；也可以在main.
【uniapp】icon图标的使用
weixin_72709530的博客
09-07 2416
uniapp使用icon图标
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
uni-app如何使用iconfont图标
weixin_44055653的博客
02-14 1090
2.将解压后的文件（如iconfont.css和字体文件）放入uni-app项目的。如果使用iconfont就可以解决这些问题,图标会类似于文字,可以自由调整大小和颜色。在uniapp项目中使用图标,一般会放在static文件夹下,会有两个问题。2.如果图标是png,jpg等格式,如果宽高设置过大会不清晰,影响用户体验。1.下载包含所选图标的iconfont项目文件，并将其解压。3.创建或选择一个项目，将购物车中的图标添加到该项目中。1.如果图标过多,会造成打包项目过大,会影响小程序打包。
Uniapp使用iconfont
qq_43827328的博客
07-27 552
1.在阿里iconfont官网上选择完毕自己想要的图标之后 点击添加至项目。 2.选择我的项目 3.生成在线链接 选择Font class，查看在线链接 （1）可以在APP.vue里面直接引入该css样式文件，文件中直接class引用即可 （2）也可以使用下载文件至本地，在APP.vue中引入本地iconfont.css文件，再点击Unicode查看在线链接，复制替换iconfont.css...
uniapp引用外部icon图标
xioxi
03-19 5492
方法一 进入阿里巴巴矢量图标库添加所需使用的icon图标添加至项目中 链接:https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.进入我的项目中，复制Unicode中的代码至app.vue中 @font-face { font-family: 'iconfont'; /* project id 2431048 */ src: url('//at.alicdn.com/t/font_2431048_f5t7z
uniapp 使用自定义icon图标
黎小小的博客
05-29 6907
注意如果时vue3需要 slot用在节点中。
【uni-app】uni-app官方自带图标的使用方法
【敦厚的曹操】的专栏
04-27 5227
【代码】【uni-app】uni-app官方自带图标的使用方法。
uni-app---icon使用
weixin_43531654的博客
11-16 792
一、导航栏icon使用 1、下载到本地 2、解压后
uniapp如何使用icon图标
10-08
UniApp中使用Icon图标非常简单。你可以使用UniApp提供的默认图标，也可以自定义Icon组件。 如果使用UniApp提供的默认图标，你只需要在需要的地方使用Icon组件，并设置type属性为相应的图标类型即可。例如： <template> <view> <icon class="my-icon" type="success" /> <icon class="my-icon" type="info" /> <icon class="my-icon" type="warning" /> <icon class="my-icon" type="error" /> </view> </template> <style> .my-icon { font-size: 36rpx; } </style> 如果UniApp提供的默认图标无法满足需求，你可以自定义Icon组件。首先，在一个.vue文件中定义一个自定义Icon组件，例如： <template> <view class="custom-icon"> <text class="icon-text">{{ iconName }}</text> </view> </template> <script> export default { props: { iconName: { type: String, required: true } } } </script> <style> .custom-icon { width: 100rpx; height: 100rpx; border: 1rpx solid #ccc; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .icon-text { font-size: 40rpx; } </style> 然后，在App.vue或需要使用Icon组件的页面的.vue文件中引入自定义Icon组件，例如： <template> <view> <!-- 其他页面内容 --> <icon class="my-icon" type="success" /> </view> </template> <script> import icon from '@/components/uni-icon/uni-icon.vue' export default { components: { icon } } </script> <style> .my-icon { font-size: 36rpx; } </style> 希望能帮到你！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值