Uniapp引入彩色图标iconfont

谁践踏了优雅 2024-03-26 11:43 39阅读 0赞

1.  进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地  
    ![阿里巴巴下载图标][7936f14a9fb41ff85c702d873e32ae56.png]
2.  对下载的文件进行解压，命令行进入解压后的文件下，执行一下命令，全局安装iconfont-tools工具
    
        npm install -g iconfont-tools
3.  再执行如下命令，然后回车。
    
        iconfont-tools
    
    ![49ed8942c989cc3dc6faf4cab8731c2f.png][]
4.  执行完毕后，会出现一个文件夹，iconfont-xk857，进入iconfont-xk857文件夹下，复制iconfont-xk857-icon.css到项目`/static/icon`目录下
    
    ![521b2d037e1446f16c70eab38e4a1c1e.png][]
5.  然后在 App.vue 引入该文件
    
        <style>
        /* 彩色的图标*/
        @import url("~@/static/icon/iconfont-weapp-icon.css");
        </style>
6.  使用：其中xk857-icon开头是必须的，彩色图标当前对 vue文件有效，控制台会关于backgroud的相关警告，可忽略它
    
        <text class="xk857-icon icon-sheji-xianxing"></text>

[7936f14a9fb41ff85c702d873e32ae56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3d1fb24bfa98477197b5c5bf82c38a11.png
[49ed8942c989cc3dc6faf4cab8731c2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2364fdce0b4c40d0b71cfe6f33ec719d.png
[521b2d037e1446f16c70eab38e4a1c1e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d207980dd6344c2293d0d5fce0b9280e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关如何在uniapp中使用iconfont图标？

一步: 从iconfont下载icon图标 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly...

墨蓝/ 2024年04月17日 06:28/ 0 赞/ 50 阅读

相关 Uniapp引入彩色图标iconfont

1. 进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 ![阿里巴巴下载图标][7936f14a9fb41f

谁践踏了优雅/ 2024年03月26日 11:43/ 0 赞/ 40 阅读

相关 vue 项目引用 iconfont 彩色图标

1.先下载 iconfont 图标库到本地，解压放到项目assets或static文件夹下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5na

深藏阁楼爱情的钟/ 2023年01月17日 08:49/ 0 赞/ 180 阅读

相关 iconfont symbol引用，展示彩色字体图标

1.去阿里巴巴图标库中找到自己的项目，选择symbol ，下载到本地。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

迷南。/ 2023年01月12日 11:59/ 0 赞/ 252 阅读

相关如何引入iconfont的字体图标

首先在[阿里巴巴矢量字体图标库。][Link 1] 把你想要的图标加入购物车。然后点击进入购物车的界面。看到有个下载代码。然后我们就会得到一个文件夹。我们把文件夹里的css。

水深无声/ 2022年12月20日 05:35/ 0 赞/ 252 阅读

相关 iconfont 支持全新的彩色字体图标

一直以来，Web 中想要使用矢量的彩色图标只能通过 SVG 的方式，这极大的束缚了用户的想象力，为此，我们一直在不断地探索和尝试。在解决了各种难题之后，今天，我很自豪地宣布，i

墨蓝/ 2022年10月07日 11:55/ 0 赞/ 219 阅读

相关 vue中引入iconfont图标

vue中引入iconfont图标本文的主要目的是介绍如何在vue中引入iconfont图标。 1、首先需要登录iconfont官网。 http://www.icon

r囧r小猫/ 2022年06月05日 02:59/ 0 赞/ 334 阅读

相关 uniapp iconfonts的引入以及使用

1.去阿里巴巴矢量图库创建项目 [https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a][https

深藏阁楼爱情的钟/ 2021年09月18日 11:48/ 0 赞/ 302 阅读

相关 iconfont字体使用彩色图标

1.先将选择好的图标加入购物车 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

╰+攻爆jí腚メ/ 2021年08月13日 13:43/ 0 赞/ 625 阅读

相关 uniapp使用iconfont字体图标

情景1：使用灰色的字体图标 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

た入场券/ 2021年07月24日 13:40/ 1 赞/ 676 阅读