微信小程序 如何引入外部字体库iconfont的图标

请看以下的详细讲解：

一、前置准备工作

在进行外部字体库iconfont的图标引入之前，需要先确保以下工作已经完成：

1. 在微信公众平台中创建小程序，并获得小程序的APPID。

2. 在iconfont（https://www.iconfont.cn/）中选择需要引入的字体库，并下载当前字体库的包。

二、引入iconfont字体库

1. 解压下载的字体包，将其中的iconfont.ttf文件添加到小程序项目文件夹中，例如/assets/fonts/下。

2. 进入小程序项目，找到app.wxss文件，并在其中进行如下配置：

/* 引入iconfont字体 */
@font-face {
  font-family: 'iconfont';
  src: url('/assets/fonts/iconfont.ttf') format('truetype');
}

以上代码表示，添加一个名为iconfont的字体，并将其绑定为/assets/fonts/iconfont.ttf中指定的TrueType字体。

1. 在app.wxss中引入iconfont字体库，以供其他页面进行使用：

@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');

此处，xxxxxx_xxxxxxx是你字体库图标变量唯一的class类名。

例如，假设你的字体库调用变量名为icon-edit，那么完整的引入代码应为：

@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');
.icon-edit::before {
  font-family: 'iconfont';
  content: '\e619';
}

1. 在小程序的页面中使用iconfont字体库，以便引入特定图标。

例如，在wxml页面中，可以使用如下代码进行icon图标的引用：

<text class="iconfont icon-edit"></text>

此代码表示在页面中添加一个类为icon-edit的字体图标，调用iconfont字体库。文本部分采用<text>标签表示。

三、示例说明

下面，我们通过两个示例演示iconfont引入方式的具体实现。

示例1：

例如，我们需要在小程序页面中添加一个edit（编辑）图标，则可以按照如下过程进行操作：

1. 打开iconfont平台，搜索“edit”，找到合适的图标库，并下载代码包。

2. 解压代码包，并找出其中的“iconfont.ttf”字体文件。

3. 将字体文件加入到小程序项目的文件中，例如在“/assets/fonts/”文件夹下。

4. 在小程序项目根目录的app.wxss文件中，加入如下代码：

/* 引入iconfont字体 */
@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');
@font-face {
  font-family: 'iconfont';
  src: url('/assets/fonts/iconfont.ttf') format('truetype');
}

1. 在相应的wxml页面中，使用如下代码进行图标的调用：

<text class="iconfont icon-edit"></text>

此处，icon-edit是当前字体库变量唯一的类名。

示例2：

假如我们需要在小程序页面中添加一个搜索（search）图标，则可以按照如下步骤进行操作：

1. 打开iconfont平台，搜索“search”，找到合适的图标库并下载代码包。

2. 解压代码包，并找出其中的“iconfont.ttf”字体文件。

3. 在小程序项目中加入字体文件，并在根目录下的app.wxss文件中加入如下代码：

/* 引入iconfont字体 */
@import url('//at.alicdn.com/t/font_xxxxxx_xxxxxxx.css');
@font-face {
  font-family: 'iconfont';
  src: url('/assets/fonts/iconfont.ttf') format('truetype');
}

1. 在wxml页面中使用如下代码进行调用：

<text class="iconfont icon-search"></text>

此处，icon-search是当前字体库变量唯一的类名。

以上两个示例中的代码可以根据具体情况进行调整和扩展。此外，也可以通过在app.wxss中添加其他样式，来改变字体库图标的大小、颜色等，以符合需求。