uni-app引入阿里Icon 图标方式（CustomIcon 扩展自定义图标库）

最新推荐文章于 2025-01-09 14:32:20 发布
原创 最新推荐文章于 2025-01-09 14:32:20 发布 · 1.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端
本文指导如何在Vue项目中正确引入iconfont.css，修改文件路径，并在App.vue中使用u-icon组件。第五步起涉及将资源引入工程，确保在static文件夹内组织。

首先骂一句，官方文档链接: link从第五步开始就是在放屁。
第五步开始应该这么做：
5，将第四步解压出的文件中，这四项引入工程，建议在static下单独建一个文件夹引入。
在这里插入图片描述

在这里插入图片描述
6、修改iconfont.css中一下部分，将括号中内容改成这几个文件的相对路径，注意将文件后缀后的问号及以后的内容删除，修改后如下：
在这里插入图片描述
7、在App.vue中引入iconfont.css，
在这里插入图片描述
8、通过下面这句代码在需要的地方引入图标。

<u-icon name="你引入的图标名" color="#2979ff" size="28"></u-icon>
Richardclass
关注
uniapp项目创建
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
08-25 1800
uniapp项目创建，uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。
【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标
孑然的个人博客
02-05 2298
【代码】【VUE】UniAPP之uview组件库，自定义tag封装，支持添加u-icon图标。
uniapp开发u-icon图标不显示问题
最新发布
weixin_66071584的博客
01-09 1237
uniapp开发图标用u-icon不显示，换成uv-icon就可以了。
uni-app（colorui）上添加iconfont到项目里，直接用class引用
weixin_38364109的博客
03-21 1785
我项目里原来的colorui的icon起的名字就是cuIcon，所以我在iconfont里创建项目时起的前缀也是cuIcon，url改为这个文件所在的路径，多余的我删掉了。uni-app的项目里用到了colorui，这个确实很方便，各种样式都是现成的，拿来用就行。但是colorui里的icon是有限的，很多想要的图标都没有，于是想直接把iconfont上的图标加到里面，直接这样用。第一步，在iconfont里选好图标添加到自己的项目里，然后直接点击下载到本地。记录下如何更方便的添加icon到项目里使用。
uniapp uni-icons 组件为例 带着大家使用并熟悉一次文档
weixin_45966674的博客
02-07 8935
如果你系统 有HBuilder X 就会自动打开 要你选择安装在哪一个项目里 如果你的HBuilder X有项目在运行 则无法安装。这里 我们只需要两个 size 控制尺寸大小的 type 控制图标的方案 类型 他让我们参考案例。直接在输入框中 搜索 uni-icons 下面内容就都出来了。先看下面的 API 看看每个字段都是干什么的。安装成功后 我们继续回到刚才的文档。uni的组件都可以直接进入官网。这里就有非常多的图标给我选。在最上面先点击下载和按在。
colorui 使用iconfont图标
HiveMe_Hitech
02-10 7026
ColorUI + Iconfont ColorUI下直接用iconfont，图标会显示乱码。各们同学可以试下以下方法。 1.首先在iconfont官网下载你的图标代码，然后解压压缩包（名字一般是download.zip)，解压后可以看到文件夹里有多个文件。 下载步骤 先把需要的图标加到库，然后添加到项目,选择或创建一个项目（也可以直接下载代码） 之后点确定，进入项目页，选择下载至本地 这里请留意里面的 iconfont.ttf 2.浏览器打开网址：https://trans..
uniapp 使用自定义icon图标
黎小小的博客
05-29 7095
注意如果时vue3需要 slot用在节点中。
uniapp中使用uview组件u-icon 编辑到微信小程序样式问题
qq_44367273的博客
11-08 4550
在微信小程序中用u-icon标签选择器才能对其设置样式，但在h5预览中u-icon{ }这样设置样式不生效，用组件的customStyle属性才生效。
uView自定义图标和普通引入图标（iconfont-阿里巴巴图标库）
章小鱼的博客
10-10 5602
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架。
uni-app怎么使用uni-icons
肖肖肖丽珠的博客
09-11 2936
然后再页面中引用这个vue的组件并对照着官网把他的type找到就可以了。把这个插件下载下来。我们找到uni_modules。把里面的uni-icons粘贴到自己的项目中。我是放在了我的components下面了。
uniapp 学习笔记五 自定义导航栏组件的全局使用
Ggome的博客
08-27 1164
全局引入 组件 uview 和 nav-custom, main.js中。局部引入test-my-comp.vue 自定义组件使用。page.json中 加上 隐藏 自带导航栏。引入并使用了colorUI和uView组件。homee.vue 中使用。
uniapp自定义图标库引入
u010289111的专栏
10-09 847
使用u-icon标签时，发现该组件支持custom-prefix属性，参考它的说明。我们可以得到字体包。对于移动端有设计搞，且设计师大量使用了非uniapp支持的图标展示的。注意的是对于渐变的按钮，是不支持字体包形式定义的。
uni-app简易教程
qq_42131193的博客
07-21 5885
uni-app使用uni-app制作app和小程序（基础）1.创建项目1.1项目目录结构2 项目运行2.1浏览器运行2.2模拟器运行2.3微信开发者工具运行3.项目发布4.注意事项`4.1尺寸单位4.2与H5的差异4.3页面配置5.UI框架使用（以uView为例）5.1安装配置如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程
在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命名以
【uiapp】uni-icons的使用
cc蒲公英的博客
11-13 1776
【uiapp】uni-icons的使用
Custom Icon——自定义图标
SmileCoffin的博客
06-28 3915
This example creates a custom element for the attribution icon. 这个例子用来为attribution控件的图标创建一个自定义的元素。 代码： Custom Icon // 创建一个超链接元素并为其设置href和target属
UniApp icon图标使用和注意事项
wulileaf的博客
11-18 9783
直入主题 icon的图标
uni ui 、color ui 图标icon的使用
m0_65392968的博客
09-21 5093
uni ui中使用icon
UNI-APP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标
小歪博客
07-03 3787
UNIAPP_顶部导航栏右侧添加uni-icons图标，并绑定点击事件，自定义导航栏右侧图标
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值