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

- 日理万妓 2021-12-24 15:41 482阅读 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 条评论，482人围观）

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

相关阅读

相关使用 iconfont 字体图标

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

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

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

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

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

相关微信小程序获取外部图标iconfont

在这里可以用到 [iconfont][] 这个网站在首页–>图像库 -->搜索–>选择图标–>添加到购物车 ![在这里插入图片描述][watermark_type_Z

青旅半醒/ 2023年07月23日 05:00/ 0 赞/ 33 阅读

相关微信小程序中使用阿里（iconfont）字体图标

一、下载图标 1、首先在阿里云（iconfont）中找到项目中所需要的图标并且加入到购物车。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

落日映苍穹つ/ 2023年06月03日 12:55/ 0 赞/ 73 阅读

相关微信小程序中使用 iconfont 图标的四种方法

1. 先去 iconfont 官网选择自己需要的图标，添加到项目中 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

淩亂°似流年/ 2023年02月28日 08:50/ 0 赞/ 38 阅读

相关微信小程序——Iconfont字体图标的引用

一，创建项目在iconfont阿里巴巴字体图库里面创建项目，添加好你需要的图标到项目中 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

港控/mmm°/ 2023年02月22日 15:53/ 0 赞/ 21 阅读

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

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

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

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

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

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

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

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

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

相关 uniapp使用iconfont字体图标

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

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