下面我们一一个小程序>微信小程序的登录界面的制作为例来说明，如何从iconfont中获取字体图标是如何应用到小程序>微信小程序中去的。首先我们看效果。

这里所有的图标，都是从iconfont中以字体的形式来加载的，也就是说，我们自始至终没有使用一张图片。
如果这就是你要追求的效果，那么我们下面开始一步一步带你如何实现。

文章原出处： https://haigear.blog.csdn.net/article/details/143225095

一、获取资源

打开网站：https://www.iconfont.cn/，如果你没有注册账号，最好是使用微信注册一个账号，这样后面你正在编写的小程序>微信小程序项目就会自动识别在这个网站平台上。

1、选择图标

首先，在iconfont中选择好你需要的图标，添加进入你的购物车，然后加入你的项目

2、下载

下载字体包文件，我们主要是获取其中的iconfont.css文件，在小程序>微信小程序中我们要用到它来显示字体图标。

3、解压

解压之前在微信项目中新建一个font的文件夹，将这些文件解压到font文件夹中。如下图：

千万记住，解压出来的css文件，将扩展名修改为wxss，这样小程序>微信小程序才能够正确识别。如果不想把这些字体也打包到小程序>微信小程序中，那么只要解压iconfont.css一个文件即可。

文章原出处：https://haigear.blog.csdn.net/article/details/143225095

二、如何应用到小程序>微信小程序中去？

上面，我们已经将最重要的文件放进了小程序>微信小程序项目的font文件夹中去了。

1、修改iconfont.wxss

如果你不想打包字体到小程序>微信小程序中，则我们就需要修改代码，将iconfont中的@font-face {……}部分，替换为你在下图复制的代码

但是，如果你担心提供字体的平台服务部稳定，那么你还是老老实实将下载的字体也一并解压到你的小程序>微信小程序的font目录下。
需要注意的是，这些本地字体如果我们在先下载前没有设置为base64小程序>微信小程序目前还不能直接识别他们，需要进行转码，将转码好的文件再次放入font下才可以使用。
设置如下图：（在项目设置里面）

如果你都已经下载完成了，也可以找一个转码转码的网站来进行转化，这里提供一个转码的网站：https://transfonter.org/

按照我上面标识的步骤来操作，3步就可以得到你要的字体。下载下来的压缩包中，对于我们来说有用的酒是这个stylesheet.css.

我们同样是将你小程序>微信小程序项目中的iconfont.wxss中的@font-face {……}部分，替换为stylesheet.css文件中的@font-face {……}部分,这样本字体图标地解析就能够正确完成。

2、在wxml文件中使用

这个比较简单，随便整一个标签试试：

<view class="iconfont icon-weixin"/><view class="iconfont icon-qq"/><view class="iconfont icon-weibo"/>

运行的效果如下：

好了，就说到这里，有什么疑问留言讨论。文章随时可能更新，请关注文章原出处：https://haigear.blog.csdn.net/article/details/143225095