uniapp项目使用iconfont彩色图标

最新推荐文章于 2024-04-24 00:00:00 发布
最新推荐文章于 2024-04-24 00:00:00 发布
阅读量2k 收藏 14
点赞数
分类专栏： uniapp相关 文章标签： uni-app css icons
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43926731/article/details/120328107
版权

文章目录

uniapp项目使用iconfont彩色图标

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

搜索图标

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

下载到本地

这个地方选择Font class，然后点击下载至本地

最低0.47元/天 解锁文章
青木_minato
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp 中如何使用阿里彩色 iconfont（兼容微信小程序）
qq_28568547的博客
06-15 376
1、在自己图标库项目中下载到本地： 2、解压 3、shift+右键 打开powershell 窗口 执行一下代码 npm install -g iconfont-tools 4、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 按一下操作 5、目录会多了个iconfont-weapp文件 进入文件把 iconfont-weapp-icon.css复制到 static 文件中 6、在app.vue中导入 @import './
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 361
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
uni-app里引入阿里彩色矢量图标，结果显示黑白的解决方案
前端小白, 稀土：雩风十六
03-19 2384
引入iconfont后，原本彩色的图标变成黑白，彩色部分甚至一坨黑，该问题的解决方案。
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 7974
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
uni-app 如何使用iconfont中的图标
最新发布
BradenHan的专栏
04-24 1049
data() {return {icons: [],},},},
如何UNI-APP中使用iconfont彩色图标
weixin_45319327的博客
07-28 2693
uni-app使用彩色iconfont图标
uni-app中使用iconfont彩色图标
java小白
08-29 1669
大家好，今天我们来学习一下uni-app中使用iconfont彩色图标，好好看，好好学，超详细的。
在uniapp中使用彩色图标
09-06 693
在uniapp中使用彩色图标
uniapp 引入iconfont 彩色图标，手把手教学┗|｀O′|┛ 嗷~~
曲江涛的博客
10-19 432
项目场景： 1、显示个性和色彩的渲染； 2、不同于基础图标仅有单调的纯色； 实现步骤： 1、iconfont选择合适的图标 2、下载Symbol至本地文件 3、iconfont-tools解析svg文件 4、引入解压后的css文件至全局 选择下载 下载后的文件大致情况，在此处shell执行第三步 执行解析步骤 npm install -g iconfont-tools iconfont-tools //一直Enter即可 解析生成文件格式大概情况 将css文件引入全局样式即可 具体使用如下 t-
uniapp字体图标的使用
12-31
uniapp字体图标的使用
uniapp+editor图标文件+iconfont.ttf
03-10
uniapp editor富文本编辑器的图标文件
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-*" *号为名称 -->
uniapp 使用map组件 动态自定义图标及文字
01-17
<!-- 地图" :titleCenter='true'> ;"> </free-scroll-main> --> ; width: 750rpx;..." :latitude="latitude" :longitude="longitude" :markers="markers" :enable-building='true' :show-location='...
32个uniapp项目源码 涵盖商城团购等
05-10
IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip mpvue 仿网易严选mpvue-shop-master.zip mpvue-音乐播放器mpvue-music-master.zip mpvue性能测试与体验miniweibo-master.zip mpvue改造...
uniapp 表格的介绍和使用
11-17
uniapp 表格
uniapp小程序使用iconfont彩色图标
LLL_liuhui的博客
06-03 3493
1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon.css放入static目录下，然后在Ap
uni-app引入彩色阿里矢量图标
weixin_52648390的博客
03-24 323
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 655
在uni-app中使用彩色的iconfont 一、在阿里巴巴矢量图标库下载iconfont 二、shift+右键打开powerShell 或者 直接在地址栏输入 cmd 三、 执行一下代码 npm install -g iconfont-tools 四、在步骤2解压的文件中 执行命令行 （shift+右键 打开powershell 窗口 也行） iconfont-tools 五、目录会多了个icon文件夹 六、 进入icon 文件夹 ctrl+a 全选 复制到 static 文件中 七、粘
uniapp显示彩色的阿里icon的图标
Aspennnnnnnn的博客
06-01 223
uniapp 阿里图标
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、付费专栏及课程。

余额充值