uview 使用自定义图标

最新推荐文章于 2025-06-30 14:00:45 发布
最新推荐文章于 2025-06-30 14:00:45 发布
阅读量8.4k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： uview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/VOID_Pointer_G/article/details/109574455

资料准备

  1. 阿里字体图标库

  2. 查阅文档：uni-app 的自定义图标 u-icon

在这里插入图片描述

操作
1. 下载svg格式的文件（如果是png等图片，先将图片转svg）
2. 上传svg文件到阿里字体图标库

在这里插入图片描述
在这里插入图片描述
根据需求填写（这里选择上传到项目）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3. 下载解压缩，修改 iconfont.css 文件

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

4. 最后效果：

在这里插入图片描述

5. 项目中引入文件

在这里插入图片描述

6. 图标库使用
 <u-icon
	custom-prefix="custom-icon"
	name="range" 
	color="pink"
></u-icon>
uview2.0 如何自定义图标
weixin_44179923的博客
12-12 3399
首先去iconfont这个网站添加自己想要的图标，然后下载下来 把ttf文件放到根目录 static/iconfont.ttf 把css放到根目录的common/iconfont.css 打开App.vue 文件 修改成下面 <script> export default { onLaunch: function() { // #ifndef MP const domModule = weex.requireModule('dom') domModule.add.
css雪碧图（精灵图）与字体图标的介绍以及对比
qq_35436516的博客
09-24 481
css雪碧图（精灵图）与字体图标的介绍以及对比 设想一个实际场景：在一个页面为了展示，我们放置了很多独立的小图片，浏览器在显示页面的时候，就需要向服务器就会发送很多请求，来获取并加载这些小图片，但是这样的话，就会导致请求数量太多，造成资源浪费，以及访问速度变慢。 碰到这样的情况，可以使用两种方式解决这种问题：CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景，需要根据实际需求来做取舍。 ...
uni-app使用uview2自定义tabber
最新发布
小赵的博客
06-30 615
在uni-app中使用uView2.x实现自定义tabbar的步骤：安装uView2.x、配置pages.json隐藏原生tabbar、创建自定义tabbar组件（含u-tabbar组件和跳转逻辑）、在App.vue中隐藏原生tabbar、在页面底部引入自定义组件。需要注意图标路径、当前选中项绑定和页面跳转路径设置，可通过easycom简化组件引入。最终实现效果为底部tabbar可切换不同页面并保持选中状态。
字体图标和精灵图的区别
qq_43654065的博客
01-20 206
css雪碧图（精灵图）与字体图标的介绍以及对比_JHCan333的博客-优快云博客css雪碧图（精灵图）与字体图标的介绍以及对比设想一个实际场景：在一个页面为了展示，我们放置了很多独立的小图片，浏览器在显示页面的时候，就需要向服务器就会发送很多请求，来获取并加载这些小图片，但是这样的话，就会导致请求数量太多，造成资源浪费，以及访问速度变慢。碰到这样的情况，可以使用两种方式解决这种问题：CSS雪碧图以及字体图标。但是这两种方式也都有不同的适用场景，需要根据实际需求来做取舍。...https://blog.c
在uView UI中扩展和使用自定义图标
苛学加记事
08-10 4469
uView UI uView UI 是 uni-app 生态最优秀的UI框架之一，提供了众多常有组件。 在一般的项目中，都会涉及一些定制的图标，以美化界面上的展示效果。 以下记录uView UI扩展和使用自定义图标的步骤；主要有五步操作，按照步骤来，分分钟搞定。 1. 准备图标素材 这里使用阿里巴巴矢量图标库iconfont，进行图标的查找和管理。 创建一个和项目对应的图标库项目 然后设置项目FontClass/Symbol 前缀和Font Family的值分别为custom-icon-和custom-
使用uview框架的icon组件之扩展自定义图标库
weixin_44168109的博客
01-26 6549
uView已经有很多图标，但也没办法满足我们所有的需求。此时，我们就需要自己扩展图标库。 icon组件之扩展自定义图标库选择以及下载图标项目配置以及使用 选择以及下载图标 1、首先可以选择自己喜欢的图标库，这里以阿里图标库为例。 2、接着选择自己的想要的图标并且加入购物车。 3、然后打开购物车把图标添加到项目中。 4、点击更多操作，选择编辑项目。 5、然后按照图片相应的填写好。 项目配置以及使用 ...
uView 扩展图标(使用阿里iconfont图标)
weixin_47218793的博客
09-29 3861
uView引用阿里图标 步骤如下 1.登录iconfont-阿里巴巴矢量图标库网站,把自己需要得图标添加到购物车里 2.把图标添加到你的项目(没有的话就新建一个项目) 3.在导航栏找到资源管理-----我的项目 4.点击项目设置,配置图标前缀(Font Family名称比FontClass/Symbol前缀少一个 - ) ,保存 5.点击 下载本地,把下载的文件解压 6.在uniapp项目根目录新建一个文件夹(我的叫common/cs...
uniapp+uview-plus实现微信小程序自定义tabbar
JavaScritp
09-11 1027
uniapp+uview组件实现微信小程序自定义tabbar
uview steps 步骤条自定义图标
11-16
如果你想要自定义UView Steps的图标，可以按照以下步骤操作： 1. **引入依赖**：首先确保已经在项目中安装并引入了`@uview/uview`库。 ```html import { Steps } from '@uview/uview'; export default { ...
uniapp 中用uview 实现自定义 导航栏
04-01
在 UniApp 中使用 uView UI 框架实现自定义导航栏效果，主要涉及以下几个方面： #### 1. 配置 `manifest.json` 文件 为了启用自定义导航栏，在项目的 `manifest.json` 文件中设置 `navigationStyle` 属性为 `custom...
uview2 swipeAction 自定义关闭事件
weixin_44826388的博客
04-03 2127
#当我们使用uview2的swiperAction时，需要实现操作后关闭打开的item,在uview2中没有对应的api,可能是考虑优化的问题没有集成关闭全部的功能，也没有集成滑动成功的回调方法，而在uview1中存在集成滑动的方法回调 open所有这里可以根据uview1实现的两种实现方式。
uView自定义图标和普通引入图标（iconfont-阿里巴巴图标库）
章小鱼的博客
10-10 4717
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架。
uni-app 引入本地iconfont
IT_iosers的博客
05-26 496
一、首先下载字体文件 二、然后删除多余文件，只需要留下 iconfont.ttf 和 iconfont.css 文件放入到 static 下，修改 iconfont.css 文件，如下 在需要的地方引入 样式文件 效果
扩展uview复选组件库支持自定义图片+自定义内容
luck332的专栏
09-25 1327
开启自定义图标，分别设置默认图片及选中图片可以先外层造 好自己想要的FLEX布局的内容，开启自定义模板，把FLEX内容往里一拖，重新生成源码即可。
vue中使用svg
Hello_oll的博客
07-24 1090
在svg文件里添加一张svgName.svg图片，iconClass跟图片名称保持一致，class可以自己添加类。注意：需要把svg图片文件的(需要修改的)fill以及stroke修改成currentColor或者直接删除。icons下创建svg目录，用来存放项目所使用的所有图标 svg 文件。比如下面的svg文件就stroke=“currentColor”在 main.js 入口文件中 全局引入 icons。完成上面操作后页面使用以及样式修改。icons下index.js文件。isExternal校验。
uniapp 使用uview 自定义图标 (引入阿里矢量图标)
小小雨伞的博客
09-05 3018
1.首先获取图标下载图标的svg 2.完成后,点击资源管理进入我的项目 点击上传你下载的图标 3.上传完成后,点击项目设置 4.点击更新代码 复制代码到前端的一个css页面 @font-face { font-family: 'custom-icon'; /* Project id 2757918 */ src: url('你的代码'); } .custom-icon { font-family: "custom-icon" !important; font-size
SwipeAction 滑动单元格
qq_44645934的博客
05-26 1787
icons8是高质量的免费图标资源网站，支持在线改色、添加文字或背景装饰等.网址。
uView 2.0使用自定义iconfont图标
baidu_37302589的博客
05-16 5339
view2.0暂不支持使用自定义图标，只能通过修改源码去实现 实现后的效果如下 1、先去图标库选择想要的icon加入项目，再生成代码 2、再点击下载代码，解压后如下 3、编写test.js文件，并通过 node test.js 执行 let path1 = "./iconfont.json"; let fs = require('fs'); const path = require('path'); let plays = JSON.parse(fs.readFileSync(path1)); co
解决uView添加自定义图标不成功
renovateF5的博客
07-11 3534
自定义图标的添加方法：CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架这里1.0版本和2.0版本教程都是一样的，估计是很长没解决了。解决步骤：1.先按照上述链接把图标css文件下载下来，然后把css中的修改成和官方教程中的一样2.修改css中的类名，把custom-icon改成custom-icon-，（原理在最下面） 3.写代码，把图标引入进去，注意这里用的代码和官方的不同 原理（可以不看）：官方说的给两个值
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值