如何从iconfont中获取字体图标并应用到微信小程序中去？

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

这里所有的图标，都是从iconfont中以字体的形式来加载的，也就是说，我们自始至终没有使用一张图片。

如果这就是你要追求的效果，那么我们下面开始一步一步带你如何实现。

文章目录

• 一、获取资源
• • 1、选择图标
  • 2、下载
  • 3、解压
• 二、如何应用到微信小程序中去？
• • 1、修改iconfont.wxss
  • 2、在wxml文件中使用

文章原出处： 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目录下。

需要注意的是，这些本地字体微信小程序目前还不能直接识别他们，需要进行转码，将转码好的文件再次放入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