引入外部iconfont到微信小程序的方法(以阿里iconfont为例)😊

在开发微信小程序时，为了提升用户体验和界面美观度，我们常常需要使用一些图标。阿里iconfont作为一款强大的图标库，提供了大量的图标资源供开发者选用。今天就来分享一下如何将阿里iconfont中的图标引入到微信小程序中吧！

首先，访问阿里iconfont官网（https://www.iconfont.cn/），注册并登录账号。接着，创建一个项目或选择一个已有的项目，添加你需要的图标。完成之后，点击“字体文件”选项卡，选择微信小程序的格式下载。

解压下载的文件后，将`iconfont.ttf`文件上传至微信小程序项目的根目录下的`asserts`文件夹内。然后，在`app.json`或页面的`.json`配置文件中，引入该字体文件：

```json

{

"window": {

"defaultTitle": "我的小程序"

},

"style": "v2",

"navigationBarTextStyle": "black",

"enablePullDownRefresh": false,

"usingComponents": {},

"pages": [

"pages/index/index"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "fff",

"navigationBarTitleText": "我的小程序",

"navigationBarTextStyle": "black"

}

}

```

接下来，在对应的WXML文件中，添加如下代码引用图标：

```html

```

最后，在WXSS文件中，添加以下样式定义：

```css

.icon {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

```

通过以上步骤，你就可以成功地将阿里iconfont中的图标引入到你的微信小程序中啦！快去试试看吧！🎉

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！