首页 > 精选要闻 > 精选百科 >

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

发布时间:2025-02-26 03:50:05来源:网易

在开发微信小程序时,为了提升用户体验和界面美观度,我们常常需要使用一些图标。阿里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中的图标引入到你的微信小程序中啦!快去试试看吧!🎉

免责声明:本答案或内容为用户上传,不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。 如遇侵权请及时联系本站删除。