uview-ui使用u-icon文字图标展示

原创 已于 2025-07-19 12:18:58 修改 · 400 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #前端 #服务器

于 2025-07-19 12:17:37 首次发布

1、效果图

2、页面代码

<u-icon size="12" name="arrow-down" label="重庆" labelPos="left" @click="citySelect()"></u-icon>

【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标
孑然的个人博客
02-05 2208
【代码】【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标。
vue 引入字体图标显示方块
BigOrange的博客
11-26 2089
问题现象： 使用element-ui，字体图表显示“方块”。 项目加载后，看加载文件，并没有.woff或.woff2或.ttf等字体图标文件。 也没有字体图表转换后的base64，文件。 环境； webpack4，vue2 有问题的代码： webpack.base.conf.js: module: { rules: [ { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, u
uniapp-x使用内置图标和iconfont图标
最新发布
我的小站：https://oby.ink
10-10 667
uniappx使用内置图标和iconfont图标
view2.0移植自定义图标，带颜色修改
weixin_41098569的博客
06-07 991
1.将图标添加到项目，修改font-family值2.下载项目打包文件，解压后如图所示我们只关心里面的iconfont.css和iconfont.json我们在这个文件夹，新建一个convert.js,内容如下 执行convert.js，得到myIcons.js将这个文件放入@/uni_modules/uview-ui/components/u-icon/文件夹下，其实myIcons.js和icons.js的样子基本相同，存着一个对象，里面放着(图标名：unicode)键值对在同目录下的props.js，
解决uview2 u-icon图标不显示问题，亲测必行
lianghuihaoKing的博客
11-03 7179
我相信很多童鞋也遇到这个情况，uview2 用在微信上其他控件都好好的，u-icon愣是不显示图标。首先原uview-ui/components/u-icon/u-icon.vue这里有个获取ttf加载字体的地方无论小程序是否正常访问到链接，或者下载ttf下来，放到小程序static文件夹里，都不好使。后来看到网上有离线情况下访问字体的方法，决定一试。咦咦咦，竟然好使了，凸凸 太棒辣！详细流程如下：看文章哈
uView组件库中icon图标显示异常（u-icon图标显示异常）
DianDian_DX的博客
08-22 310
通过不断改变u-icon标签的位置查找产生异常的位置，发现只有在该u-icon的父元素对应类名下才无法显示。平常开发还是要尽量避免对原生标签样式进行修改以免产生冲突。排查发现是因为同级样式下自定义了text标签的样式。将其修改为自定义类名。
uView——uview 自定义 u-icon 图标大小
qq_43201350的博客
01-04 2420
uView——uview 自定义 u-icon 图标大小
小改UVIEW-UI的Toast组件，不给弹窗遮挡，自定义皮肤
applebomb的专栏
06-13 1287
UVIEW-UI兼容多端好用，自己使用时遇到几个问题： 1）Toast组件在有popup组件时，会出现Toast看不到的问题 2）原代码是javascript写的，更改一下适配Typescript，尤其是type指定的方式 3）由于是暗色色系，需要重新定义一下皮肤本着解决这几个问题的思路，就读了下uview-ui的toast组件u-toast.vue源码： u-toast.vue： 然后开始解决问题：这个直接丢给AI就行了，GPT呼啦啦一会就翻译好了。当然还有几个BUG，类型不对什么的错误，也不是GPT
uniapp踩坑实战之引用‘uview-ui‘
qq_31432773的博客
08-29 938
我是在dcloud插件库里面下载的，默认他默认下载在了“uni_modules”，而我用官方的方式总是报：文件查找失败：'uview-ui' at main.js。Icon 图标 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架。uView UI，是 uni-app 生态最优秀的 UI 框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水。以下是官方方法，但我这里一直报错，是因为直接写他是从“node_modules”文件夹中找。
基于uniapp使用uview-ui模板实现动态更改底部tabbar
weixin_43810713的博客
11-25 2397
基于uniapp使用uview-ui模板实现动态更改底部tabbar
uView-ui自定义icon,图标后面有英文字符，怎么去掉
07-05
**原理**：uView 的图标文字默认使用 `.u-icon__label` 类名，隐藏该元素即可[^2]。 ### 推荐方案 优先使用 **方法 1** 的属性控制，这是官方推荐做法。若需全局修改，可采用方法 2 的 CSS 方案。 > ⚠️ 注意：...
uView-ui自定义icon,图标后面有16进制的字符，怎么去掉
07-05
我们正在使用uView UI框架，并且自定义了图标（icon），但是显示时出现了多余的16进制字符。用户希望去除这些字符。 根据引用内容，我们并没有直接关于此问题的引用，但我们可以根据uView UI的一般使用经验来推断...
uniapp中使用uview组件u-icon 编辑到微信小程序样式问题
qq_44367273的博客
11-08 4432
在微信小程序中用u-icon标签选择器才能对其设置样式，但在h5预览中u-icon{ }这样设置样式不生效，用组件的customStyle属性才生效。
动态设置u-iocn的图标
m0_61265297的博客
04-13 519
【代码】动态设置u-iocn的图标。
uniapp开发u-icon图标不显示问题
weixin_66071584的博客
01-09 1009
uniapp开发图标用u-icon不显示，换成uv-icon就可以了。
【Uniapp】解决uView2.0离线状态下icon图标不显示的问题
VT_馒头的博客
07-17 5302
在uniapp + uView的项目中，在web端、模拟器端都显示正常，但是在真机，内网环境，不能访问外网的环境下运行时，icon图标就无法显示，很明显，原因肯定跟网络有关，于是乎去看了一下uView的源码，发现在uview-ui/components/u-icon/u-icon.vue有一个引入在线的阿里巴巴iconfont的url，因此需要将这个远端ttf字体文件改为本地能够获取到的数据。
u-icon添加点击事件
前端
09-27 3067
// 内部封装了click事件$emit方法, 返回index /* * click() { this.$emit('click', this.index) }, * 所以icon外面 @click 事件添加 index属性就好了! */ // html <u-icon name="arrow-down" size="24" color="#757575" :index="index" @click="toggleshow"></u-icon> // js m
解决uView2.0(离线/断网/内网)状态下icon图标不显示的问题
前端小胡兔的博客
12-12 1003
解决uView2.0(离线/断网/内网)状态下icon图标不显示的问题
uView UI 组件大全
suny8的专栏
07-13 1229
使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值