Taro UI 中使用第三方图标

最新推荐文章于 2025-04-24 10:15:00 发布
最新推荐文章于 2025-04-24 10:15:00 发布
阅读量3.1k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuimingjia0524/article/details/89421089
本文介绍如何下载并使用阿里图标库，包括将样式文件导入项目，以及在页面中正常显示图标的过程。

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

首先下载第三方组件库，比如阿里图标库，解压之后会看到一样式文件，如下：

在src建icon.css文件，其中把上面下载的文件内容iconfont.css里面的内容拷贝到icon.css

现在icon.css内容如下：

在app.js中引入icom.css

在index页面中就可以正常使用了

显示如下：

Taro：阿里图标的使用
weixin_42301205的博客
06-01 1720
Taro：阿里图标的使用一、下载图标代码1、将图标加入购物车2、在购物车中将图标添加至项目3、获取代码链接4、复制代码二、创建icon.css并把代码复制进去三、在app.jsx中引入icon.css四、使用图标1、安装taro-ui2、代码五、效果展示 一、下载图标代码 1、将图标加入购物车 2、在购物车中将图标添加至项目 3、获取代码链接 4、复制代码 二、创建icon.css并把代码复制进去 将 " .iconfont " 改为 " .icon " // src/icon/icon.css
Taro小程序兼容H5 CSS 样式问题
weixin_46104314的博客
02-08 1815
记录Taro小程序兼容h5改造存在的Css问题，如单位转换、标签样式异常等。
Taro+react开发（60) 第三方icon使用
歌谣的博客
09-16 349
<AtIcon prefixClass="icon" value={ isLike===true?"icon-like-select":"icon-like-default" } size="14" color={isLike===true?"#FF7F00":"#999"} ...
Taro中tabBar的使用
weixin_42159343的博客
03-18 5330
先在路径/src/app.tsx下将页面添加到页面管理中 pages: [ 'pages/index/index', 'pages/toggle/toggle' ], 在页面管理的后面加上tabBar的内容 tabBar:{ list:[ { pagePath:"pages/index/index", ...
[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
weixin_30375427的博客
07-23 1608
Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题： 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文档配置后，小程序下 Iconfont 图标 才可正常显示 转载于:https://www.cnblogs.com/wukong1688/p/11233244.h...
【亲测免费】 Taroify 项目常见问题解决方案
gitblog_00128的博客
12-11 870
Taroify 项目常见问题解决方案 项目基础介绍 Taroify 是移动端组件库 Vant 的 Taro 版本，基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。Taroify 使用 TypeScript 编写，提供完整的类型定义，并且支持 React。项目的主要编程语言是 TypeScript 和 JavaScript。 新手使用注意事项及解决方案 1. 安装依赖时遇...
【MoodVine】Taro+React小程序框架引入taroify组件库样式不显示及报错问题的解决
m0_74102407的博客
04-24 407
前情提要：taro版本3.6.11；react版本：18.0.0总之是选择了taroify作为本次项目的组件库，根据官方文档，安装理应非常轻松，可惜博主天生bug命，总是遇到一些奇怪的问题，在此记录了一下修复bug的全流程。
购物车图标悬浮加购动效基于Taro实现
- 如果涉及复杂的动画效果，可能会包含JavaScript代码或者第三方动画库的配置文件。 - 开发文档或README.md文件，描述如何使用该组件，包括安装、配置以及集成到现有项目中的步骤。 - 可能还会包含示例代码或项目...
面试篇：（八）Taro 小程序开发 - 2024 年前端面试技巧与面试题汇总
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
10-30 1798
Taro 小程序开发的更多高频面试问题解析，覆盖了框架的核心特性和实际开发中的常见场景。这些问题和解答将帮助您在面试中展示自己对 Taro 框架的理解和应用能力。希望对您准备面试有所帮助！
【微信小程序开发】资源指南：涵盖官方文档、工具、教程、UI组件库及实战案例汇总介绍了微信小程序开发
最新发布
07-16
云开发资源则包含微信云开发提供的后端服务以及LeanCloud和Bmob第三方BaaS。社区与问答部分列举了官方社区、技术论坛和Stack Overflow。最后，推荐了几本相关书籍并给出了实战项目案例，旨在帮助开发者顺利开展微信...
taro-ui 中引入和使用 iconfont图标库
业余前端的职业经历
09-12 2732
taro-ui 是 taro的 ui库，虽然有自带的图标，但是吧 可能有些需求的图标还是没有的，需要我们自己来搞，那么inconfont图标库就是一个不错的选择 去图标库中找几个图标 下载到本地 首先你的项目得支持引入本地静态资源，这个好像是默认配好了 不用管 在src文件夹下 创建一个 assets 文件夹 存放静态资源然后就是。css 和 字体 fonts 分别 把我们刚才下载下来的那个 文件解压缩 然后放到指定的文件夹中 （iconfonts.css 放到 css文件夹中。字体的文件 放到字体文件
Taroify 移动端组件库 (极力推荐)
https://shixuebin.gitee.io/hexo-blog/
09-02 3734
介绍 Taroify 是移动端组件库 Vant 的 Taro 版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。 安装 通过 npm 安装 npm i @taroify/core -S --production 通过 yarn 安装 yarn add @taroify/core --production 使用组件 import { Button } from "@taroify/core" function ButtonExample() { retu.
taro小程序中如何引入css_moudle？配置后不生效的解决方法
清颖的博客
05-06 2481
taro官网没有写更多的内容，网上查找了一番，找到了方法。按步骤来： 1. 改配置文件，即标题1中所述。 2. 给样式文件 less/scss/css 加前缀：`.module`，如原来是：`index.less`，要改为`index.module.less` ……重新编译运行，给类名加了5位数的哈希字符，OK啦！
【2022更新】Web Components中引入外部CSS的9种方法
老司机的后备箱
10-17 1036
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
Taro Icons 使用教程
gitblog_00102的博客
09-13 994
Taro Icons 使用教程 1. 项目介绍 Taro Icons 是一个基于 Taro 框架的小程序图标库，提供了丰富的图标资源，支持按需加载，减少包大小。目前支持的图标库包括 Ionicons、MaterialIcons、MaterialCommunityIcons 和 FontAwesome。Taro Icons 的设计初衷是为了方便开发者在小程序中快速集成和使用高质量的图标资源。 2. ...
taro-h5：设置网站的favicon.ico图标
qq_38969618的博客
01-31 1572
一、将favicon.ico图标放到src目录下。二、在src/index.html中引入即可。
前端UI框架整理
空·之·音
01-05 3503
1.TDesign 腾讯最近刚刚公开的一套UI框架，个人感觉不错，下面是官网介绍： TDesign 是什么 TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。 TDesign 具有统一的 设计价值观，一致的设计语言和视觉风格，帮助用户形成连续、统一的体验认知。在此基础上，TDesign 提供了开箱即用的 UI 组件库、设计指南 和相关 设计资产，以优雅高效的方式将设计和研发从重复劳动中解放出来，同时方便大家在 TDesign 的基础上扩展，更好的的贴近业务需求。 为什么会有 TDe
taro 的项目结构_基于Taro与Typescript开发的网易云音乐小程序
weixin_27653327的博客
01-09 401
基于Taro与网易云音乐api开发，技术栈主要是：typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示，主要也是借此项目强化下上述几个技术栈的使用，打造一个最佳实践项目，通过这个项目也可以帮助你快速使用Taro开发一个属于你自己的小程序，此项目会持续更新，欢迎watch和star～taro-music​github.comgithub地址：taro-music...
Taro引入阿里图标
weixin_42861240的博客
05-20 4391
首先进阿里图标下载项目至本地 下载完解压缩打开后将以下文件复制出来 这边我在src下新建一个fonts目录,将上面复制下来的五个文件放到里面（目录名可以自己命名，或者放在其他目录下） 返回到上级也就是src目录下打开app.tsx（或app.js）文件引入 import ‘./fonts/iconfont.css’ 以上就引用完icon,接下来我们来试试效果，在页面中写上以下内...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值