uniapp项目使用iconfont彩色图标

最新推荐文章于 2024-08-25 11:05:28 发布
最新推荐文章于 2024-08-25 11:05:28 发布
阅读量2.2k 收藏 14
点赞数
分类专栏： uniapp相关 文章标签： uni-app css icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43926731/article/details/120328107
版权
本文介绍在uniapp项目中如何正确使用阿里云iconfont的彩色图标。通过搜索图标、下载到本地、解压并执行命令、复制CSS文件、引入CSS文件以及在代码中使用class名，实现彩色图标在项目中的显示。遵循步骤，可以在uniapp页面上看到预期的彩色icon效果。
摘要由CSDN通过智能技术生成

文章目录

uniapp项目使用iconfont彩色图标

在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。

搜索图标

打开icongont官网搜索自己想要的图标，以微信图标为例。
在这里插入图片描述
点击自己想要的彩色图标加入到购物车，再点击添加至项目
在这里插入图片描述
根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹

下载到本地

这个地方选择Font class，然后点击下载至本地在这里插入图片描述

解压压缩包并执行命令

下载iconfont-tools

解压下载的压缩包，下载iconfont-tools

npm install -g iconfont-tools

进入到文件夹里面用cmd执行下列命令

最低0.47元/天 解锁文章
青木_minato
关注
专栏目录
uniapp如何引入iconfont图标库
qq_45018844的博客
10-14 2100
第一步： 你得拥有一个uniapp项目 第二步 点击iconfont官网 在首页选好图标，在项目中新建一个css 将上面的1复制在css中，再点开下面这个链接 再复制这个，在css中，下面就是css的代码了 @font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo
在UniApp中如何使用Iconfont
RaAutoit的博客
09-27 949
本文将详细介绍在UniApp中使用Iconfont的步骤，并提供相应的源代码示例。通过获取Iconfont图标库，导入图标字体文件并配置全局样式，你可以轻松地在UniApp项目中使用各种矢量图标。将下载的Iconfont图标文件解压，你会得到一个包含字体文件（例如.ttf或.woff）和一个样式文件（例如.css或.scss）的文件夹。根据你在Iconfont官网选择的图标，修改类名即可展示不同的图标。在上面的示例中，我们使用了名为"heart"的图标，并将其样式设置为24像素大小和黑色。
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 8615
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
uni-app里引入阿里彩色矢量图标(Symbol),却发现图标显示为黑白
最新发布
一只猫
08-25 790
当使用uniapp并尝试引入阿里iconfont的彩色图标时，发现图标显示为黑白。原因是Fontclass模式不支持彩色图标。解决方法是下载Symbol模式的SVG文件，使用iconfont-tools进行转换，然后在项目中全局引入转换后的CSS文件，最终在组件中正确显示彩色图标。
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 417
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
uniapp 使用 iconfont 彩色图标
m0_71513265的博客
07-02 486
uniapp，使用 iconfont 图标，黑白、彩色显示
uni-app中使用iconfont彩色图标
java小白
08-29 1851
大家好，今天我们来学习一下uni-app中使用iconfont彩色图标，好好看，好好学，超详细的。
如何UNI-APP中使用iconfont彩色图标
weixin_45319327的博客
07-28 2926
uni-app使用彩色iconfont图标
在uniapp中使用彩色图标
09-06 727
在uniapp中使用彩色图标
uniapp 中使用彩色图标，引入阿里图库iconfont
hu104160112的博客
06-18 1516
1.选择symbol模式，下载到本地 2.下载后解压 3.在解压开的文件夹中 shift+右键 打开powershell 窗口 执行代码：npm install -g iconfont-tools 4.然后执行代码：iconfont-tools 然后一路回车 5.文件夹中就多出一个文件 iconfont-weapp 6.把 iconfont-weapp-icon.css 移入你的项目中 7.App.vue中添加以下代码 @import "./common/iconfont-weapp/iconf
uni-app的图标插件
01-14
导入到其它项目中使用方法 1. 将components/fa-icons/fa-icons.vue文件(夹)复制到自己的项目下 2.在main.js中全局引入 // 图表组件 import faicon from './components/fa-icon/fa-icon.vue' Vue.component('faicon',faicon) 3.页面中引用 在需要插入的页面引用 <!-- type 为图标名称 color 为图标颜色 默认#000000 (黑色，可不填) size 为图标大小 默认14px/1 (可不填) --> 或者class直接引用 <!-- 注意格式否则无法正常显示 class="fa fa-*" *号为名称 -->
uni-app使用阿里iconfont多色图标
熟悉JS拼写的FE
11-06 2326
先吐槽一下，好像uniapp不支持symbol,多色图标???? 进入正题，第一步下载到本地 进入iconfont中的我的项目中,先下载到本地 然后解压。 第二步下载一个处理iconfont的命令 全局下载iconfont-tools，下载一次就行 npm install -g iconfont-tools 下载完成后，在刚刚解压后的文件目录中，进入命令行 执行 iconfont-tools 如果不需要修改文件夹名、css文件名、统一类名 、字体大小的话，一路回车就行,如果修改的话就直接修改
uniapp 引入iconfont 彩色图标，手把手教学┗|｀O′|┛ 嗷~~
曲江涛的博客
10-19 496
项目场景： 1、显示个性和色彩的渲染； 2、不同于基础图标仅有单调的纯色； 实现步骤： 1、iconfont选择合适的图标 2、下载Symbol至本地文件 3、iconfont-tools解析svg文件 4、引入解压后的css文件至全局 选择下载 下载后的文件大致情况，在此处shell执行第三步 执行解析步骤 npm install -g iconfont-tools iconfont-tools //一直Enter即可 解析生成文件格式大概情况 将css文件引入全局样式即可 具体使用如下 t-
uniapp小程序使用iconfont彩色图标
LLL_liuhui的博客
06-03 3676
1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon.css放入static目录下，然后在Ap
uniapp引入彩色的字体图标的教程
Lulu_yo的博客
12-26 774
1、阿里巴巴矢量图标官网，将自己喜欢的图标加入购物车，然后下载图标到本地2、在uniapp下的static，新建一个iconfont文件夹，将下载的压缩包解压图标到static的iconfont下面。3.进入文件夹下，按照以下步骤：4.命令窗口输入如图内容5、之后会发现多了这个文件6、然后就可以使用它了，一定要按照标横线这样的格式去使用：注意：1、一定要按照它的样式： t-icon t-icon-XXXXX2、通过height 和 width 改变它的图标大小3、需要加。
uniapp 中使用 iconfont
加菲猫的VFP
09-10 425
uniapp 中使用彩色的 iconfont1、在自己图标库项目中下载到本地：2、解压3、shift+右键打开powershell窗口执行一下代码npm install -g iconfont-tools4、在步骤2解压的文件中执行命令行 （shift+右键打开powershell窗口也行）iconfont-tools按一下操作5、目录会多了个iconfont-weapp文件...
uni-app引入彩色阿里矢量图标
weixin_52648390的博客
03-24 352
uni-app引入彩色阿里矢量图标 1.将要用的彩色图标添加到项目中 2.下载到本地，解压 3.打开cmd，找到项目文件夹安装iconfont-tools，敲入命令： npm install -g iconfont-tools 4.cmd进入解压的文件夹，运行iconfont-tools，一路回车即可 5.点击生成的文件夹 6.将上面箭头指着的iconfont-weapp-icon.css文件复制到项目中的static文件夹中 7.App.vue文件引入，注意路径不要写错了 8.在需要的页面写
在uni-app中使用彩色的iconfont
m0_43413873的博客
12-29 682
在uni-app中使用彩色的iconfont 一、在阿里巴巴矢量图标库下载iconfont 二、shift+右键打开powerShell 或者 直接在地址栏输入 cmd 三、 执行一下代码 npm install -g iconfont-tools 四、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 五、目录会多了个icon文件夹 六、 进入icon 文件夹 ctrl+a 全选 复制到 static 文件中 七、粘
uniapp项目引入iconfont
09-05
在uniapp项目中引入iconfont，可以按照以下步骤进行操作： 1. 在App.vue文件中引入iconfont.css文件，可以通过在style标签内使用@import语法来引入：“@import "./font/iconfont.css";”。 2. 打开iconfont官网，新建一个项目并添加需要的图标。 3. 在iconfont文件中，包含了iconfont.ttf和iconfont.css两个文件。需要将iconfont.ttf文件转换成base64格式。你可以使用一个转换工具，例如https://www.giftofspeed.com/base64-encoder/来进行转换。 通过以上步骤，你就可以成功在uniapp项目中引入iconfont图标了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [UNI-APP引入iconfont的方法](https://blog.csdn.net/qq_24537119/article/details/114400471)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [【小程序开发】uniapp引入iconfont图标及使用方式](https://blog.csdn.net/qq_49002903/article/details/127445998)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值