Taro引入阿里图标

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

#Taro引入Icon #Taro引入阿里图标 #引入图标

本文介绍了如何在Taro项目中引入并使用阿里图标库。首先下载阿里图标项目，解压后将所需文件复制到src/fonts目录。然后在app.tsx中引入iconfont.css。最后在页面中测试图标显示，调整大小和样式，已验证在H5和小程序的效果。

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

  1. 首先进阿里图标下载项目至本地在这里插入图片描述

  2. 下载完解压缩打开后将以下文件复制出来在这里插入图片描述

  3. 这边我在src下新建一个fonts目录,将上面复制下来的五个文件放到里面（目录名可以自己命名，或者放在其他目录下）在这里插入图片描述

  4. 返回到上级也就是src目录下打开app.tsx（或app.js）文件引入 import ‘./fonts/iconfont.css’在这里插入图片描述

  5. 以上就引用完icon,接下来我们来试试效果，在页面中写上以下内容，由于图标太小所以我加上大小，样式就自己调试了
    <View className='iconfont icon-home' style='font-size:30PX;color:red;'></View>
    在这里插入图片描述

  6. 最后效果如下（目前只测试了h5和小程序）

最低0.47元/天 解锁文章

200万优质内容无限畅学
taro开发小程序引入icon字体库
weixin_30952103的博客
07-25 2068
1、在阿里巴巴字体库选购喜欢的字体并下载压缩文件, 阿里巴巴字体库使用方法 1.进入阿里巴巴字体官网 注册登录 2.按照如图所示1、2、3 创建一个项目3.在首页选择需要的字体添加到购物车,4.在右上角购物车内,将所选图标添加到项目中5.在项目中选择 fontclass 获取在线样式地址 也可以直接下载到本地6.在本地项目中引入该样式即可使用 标签内直接添加 字体类名和选中的类...
Taro：阿里图标的使用
weixin_42301205的博客
06-01 1721
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+react开发（56) 引用第三方icon
歌谣的博客
09-13 306
<AtIcon className="que_header_left_icon" prefixClass="icon" value="icon-share" size="16" ></AtIcon>
taro-ui 中引入和使用 iconfont图标库
业余前端的职业经历
09-12 2732
taro-ui 是 taro的 ui库，虽然有自带的图标，但是吧 可能有些需求的图标还是没有的，需要我们自己来搞，那么inconfont图标库就是一个不错的选择 去图标库中找几个图标 下载到本地 首先你的项目得支持引入本地静态资源，这个好像是默认配好了 不用管 在src文件夹下 创建一个 assets 文件夹 存放静态资源然后就是。css 和 字体 fonts 分别 把我们刚才下载下来的那个 文件解压缩 然后放到指定的文件夹中 （iconfonts.css 放到 css文件夹中。字体的文件 放到字体文件
Taro中使用IconFont
baidu_33853807的博客
04-02 2084
IconFont库 https://github.com/iconfont-cli/taro-iconfont-cli 注意点 1.Taro版本 如果您使用Taro2.x，请安装 taro-iconfont-cli@2.1.0，并阅读旧版的README.md 2.配置文件 { "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接", "save_dir": "./iconfont", "use_typescri.
Taro项目引入iconfont 更新 iconfiont
Youyzq的博客
12-30 2432
实现需求： 在Taro框架编译成的微信小程序/支付宝小程序等中使用iconfont图标 推荐插件 taro-iconfont-cli 老样子第一步、安装插件直接下载 npm install taro-iconfont-cli --save-dev 第二步 生成配置文件 npx iconfont-init 配置文件大概内容 { "symbol_url": "//at.alicdn.com/t/font_937195_r92oas7kdg.js", // "symbol_url":这里着重强调
小程序以及h5引入阿里图标不显示最简单解决方案
weixin_43086811的博客
07-06 2188
小程序项目，按照老方法，图标部分手机不显示，经理炸毛，自己也头痛，网上搜了一大堆方法，有转化base64的，还有其他各种的，感觉太麻烦了也不好用，本人就讨厌麻烦，直男程序员一枚，今天花时间，认真研究了一下，发现这个方法兼容性最好，小程序上线半年了，也没有收到反馈看不见图标的，分享出来。 小程序以及h5引入阿里图标不显示最简单解决方案，亲测有效并用于方案。 第一步 小程序项目结构如图： 第二步 ...
nut-ui组件库icon中使用阿里图标
阿乐的博客
03-12 1139
但是很多组件库中并找不到我们需要的图标 这时候 大家有可能会找图标库 最大众的就是iconfont的图标了。下载以后是这样的文件夹 最重要的是 iconfont.css 这个文件夹。有很多方式去使用这个东西 比如将再限链接中的css引入 在使用。基本每个移动端组件库都有组件 icon组件 图标组件、我使用的是iconfont组件库中的icon 组件。symbol 方式 等.............①进入iconfont选择图标。这中叫做 自定义图标。
vue2中引入svg图标的方式
gaoyapei1993的博客
03-21 4270
说明：在实际的项目开发中，使用svg图标占用内存比图片更小，映入图片内存比较大，同时也适用于不同屏幕的尺寸， 1，安装 npm i svg-sprite-loader --save 2，在components文件夹中新建文件SvgIcon,在文件夹下新建文件index.vue 2,在index.vue文件下写入代码 <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners">.
Taro使用阿里图标库方法
三季雨
04-10 746
把stylesheet.css 内容复制到src\style\iconfont.css下， 修改内容如下。app.less引入 @import ‘./style/iconfont.css’;下载后 选择ttf后缀的文件 下载。
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
taro-iconfont-cli 在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3、支持多色彩 4、支持自定义颜色 5、支持es6和typescript两种模式 Step 1 安装插件 如果您使用Taro2.x，请安装 taro-iconfont-cli@2.1.0，并阅读旧版的 # Yarn yarn add taro-iconfont-cli --dev # Npm npm install taro-iconfont-cli --save-dev Step 2 生成配置文件 npx iconfont-init # 可传入配置输出路径 # npx iconfont-init --output iconfont.json
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
10-17
主要介绍了在webstorm开发微信小程序之使用阿里自定义字体图标 的相关资料,需要的朋友可以参考下
Taro 框架中使用iconfont 阿里巴巴矢量图标 class版
阿乐的博客
07-30 708
最进开发 Taro + nut-ui 的H5 移动端的时候 我发现一些图标我在组件库中找不到 我看到了nut-ui 中还有另一种使用方法。这里说明一下 很多的方式使用 我们在这里使用 下载文件的方式。就正如 在nut-ui 组件库中所说的那样 的使用方式。我来用实际操作 代码 来介绍一下 这个怎么使用。把下载的文件夹 放到 这个项目 目录中 文件夹。想必大家都知道这个图标库的 图标还是很多的‘① 选择好自己想要的图标 添加到项目。③.在Taro 项目中引入。第一 给大家分享技术。下载下来文件 是这样的。
taro-h5：设置网站的favicon.ico图标
qq_38969618的博客
01-31 1572
一、将favicon.ico图标放到src目录下。二、在src/index.html中引入即可。
推荐开源项目：Taro IconFont CLI
gitblog_00076的博客
03-27 481
推荐开源项目：Taro IconFont CLI 是一个强大的命令行工具，专为前端开发者设计，用于自动化管理和集成自定义图标库到Taro项目中。这个项目基于Node.js构建，旨在简化与IconFont图标库的交互，提升开发效率。 技术分析 1. 基于Taro框架 Taro IconFont CLI是针对腾讯Taro框架优化的。Taro是一个多端统一开发框架，能够帮助开发者编写一次代码，运行在微信...
Taro使用阿里图标库Iconfont
qq_26258865的博客
01-02 7842
Taro使用阿里图标库Iconfont下载阿里图标库至本地在Taro项目中使用啦 下载阿里图标库至本地 选择图标加入到我的项目 下载至本地 解压拷贝出iconfont.css和iconfont.eot两个文件至项目中 在Taro项目中使用啦 在 app.js中全局引入引入阿里图标库的样式 //引入阿里图标库 import './assets/css/iconfont.css' 准备...
taro-iconfont-cli 使用指南
最新发布
gitblog_01134的博客
08-22 364
taro-iconfont-cli 使用指南 一、项目目录结构及介绍 taro-iconfont-cli ├── bin # 命令行工具入口文件夹 │ └── iconfont-taro.js # 主要命令执行文件 ├── src # 源代码文件夹 │ ├── index.js ...
[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
runwuwushengxiyu的博客
06-22 715
[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
taro 怎么引入svg图标
07-11
要在Taro中引入SVG图标，可以按照以下步骤进行操作： 1. 首先，将SVG图标文件放置在项目的某个目录下，例如 `src/assets/icons`。 2. 在 Taro 项目的配置文件 `config/index.js` 中，添加对 SVG 文件的支持。找到 ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值