微信小程序使用字体图标 iconfont

- 日理万妓 2021-12-24 15:41 412阅读 0赞

#### 第一步：在阿里巴巴矢量图标库下载需要的图标 ####

地址：https://www.iconfont.cn/

添加至项目

![1073044-20190531135120471-1659618030.png][]

#### 第二步：打开在线代码 ####

将在线代码复制

![1073044-20190531135341957-533338369.png][]

#### 第三步：点击下载至本地下载图标 ####

![1073044-20190531135502804-1133711427.png][]

将下载的download文件解压打开iconfont.css，将文件中的@font-face替换为在线链接（即刚刚复制的代码）。

#### 第四步：将iconfont.css文件中的代码复制到微信小程序使用字体图标的的wxss文件中。 ####

使用实例：

<icon class='iconfont icon-icon_fabu'/>
    <icon class='iconfont icon-ditu-dibiao'/>
    <icon class='iconfont icon-gongdanqueren'/>
    <icon class='iconfont icon-kongxinduigou'/>
    <icon class='iconfont icon-icon_zhanghao'/>

效果

![1073044-20190531135855675-1202034292.png][]

原文：https://www.jianshu.com/p/10cb579539f0?utm\_campaign=maleskine&utm\_content=note&utm\_medium=seo\_notes&utm\_source=recommendation

转载于:https://www.cnblogs.com/1906859953Lucas/p/10954929.html

[1073044-20190531135120471-1659618030.png]: /images/20211223/6e9bbbc4563744ed8b5093f0e21bfc0e.png
[1073044-20190531135341957-533338369.png]: /images/20211223/7ef1b34cbc4a4e7a9a390828808facb9.png
[1073044-20190531135502804-1133711427.png]: /images/20211223/233194fd62f142bfb169a7e41b5f3806.png
[1073044-20190531135855675-1202034292.png]: /images/20211223/9fb35a50695047aa8dd22ec5ee09ac0e.png

发表评论取消回复

表情：

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

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

相关阅读

相关使用 iconfont 字体图标

<i class="iconfont icon-home"></i> 使用时只需要添加class=“iconfont icon-xxx”，xxx可以去阿里巴巴矢量...

迈不过友情╰/ 2024年04月19日 14:58/ 0 赞/ 18 阅读

相关微信小程序中使用iconfont(阿里矢量图标字体)

微信小程序中使用 iconfont 主要有两种方式，第一种是使用 Font class 方式，第二种是使用 Unicode 方式。 **方式一：Font class 方...

我会带着你远行/ 2024年04月18日 21:53/ 0 赞/ 3 阅读

相关微信小程序之使用阿里巴巴矢量图标库(Iconfont)

里巴巴矢量图标库(Iconfont)可以说是我们后台程序猿们的福音，对应我们这些不会做图，有对项目审美有洁癖的人来说，没有一个漂亮的界面，我们真的看不下去，我个人也是非常...

Love The Way You Lie/ 2024年04月18日 05:04/ 0 赞/ 12 阅读

相关微信小程序如何引入iconfont图标字体库

我选择引入字体图标库的原因是加载图片会影响小程序页面的打开速度第一步：去[阿里巴巴][Link 1]的图标库找到你喜欢的图标加入购物车添加到你创建的项目 !

待我称王封你为后i/ 2022年12月06日 01:14/ 0 赞/ 187 阅读

相关微信小程序使用字体图标 iconfont

第一步：在阿里巴巴矢量图标库下载需要的图标地址：https://www.iconfont.cn/ 添加至项目 ![1073044-20190531135120

- 日理万妓/ 2021年12月24日 15:41/ 0 赞/ 413 阅读

相关小程序引入iconfont字体

第一步下载自己喜欢的图标我用的是阿里巴巴矢量图库，在[Iconfont][]找到自己喜欢的图标，加入购物车，如图： ![aHR0cHM6Ly91cGxvYWQtaW

我不是女神ヾ/ 2021年11月11日 22:18/ 0 赞/ 409 阅读

相关 mpvue小程序引入阿里云iconfont字体图标

首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 [http://www.iconfont.cn/home/index][http_www.iconfont.cn

小咪咪/ 2021年09月17日 06:34/ 0 赞/ 344 阅读

相关微信小程序 - 字体图标的使用（详细介绍）

今天，在开发一个项目的时候，想要使用字体图标，减少项目的大小，然后自己下载好自己选的图标，引入使用的时候发现一直不行，经过多次百度搜索总结之后终于可以正常使用。这里介绍两个

太过爱你忘了你带给我的痛/ 2021年08月28日 15:35/ 0 赞/ 783 阅读

相关 iconfont字体使用彩色图标

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

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

相关 uniapp使用iconfont字体图标

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

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