微信小程序--icon引入外部图标_微信小程序底部的icon地址能用线上的地址吗-优快云博客

本文链接：https://blog.youkuaiyun.com/rta_bh/article/details/108630339

本文详细介绍了如何在微信小程序中添加底部Tab导航，并通过阿里iconfont平台获取图标资源，将其成功集成到小程序界面中，包括搭建小程序框架、配置TabBar及调整图标样式等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本博客仅仅只是个意外。大佬请绕道。

第一步：搭建框架

首先你得有个微信小程序的开发工具，然后把小白架构搭建好。（不会去看官网）。

简单的初步框架搭建完之后目录和界面是这个样子：

如果想加一个底部tab框，只需要在pages目录下新建个目录，然后在新建个pages就OK了。创建好之后再app.js里会自动加入此目录，但是不会显示底部tab框。这里就要看官网的tabBar如何说明的了，只需要改下app.js，代码：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/icon/icon"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ccc",
    "navigationBarTitleText": "微信小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/icon/icon",
        "text": "图标"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

编译并进入图标：

第二步：下载图标并引入

进入阿里icon，登录后选中你想要的图标加入到购物车，选完之后点击购物车，选择下载代码。

下载出来的是一个zip压缩包，解压之后就可以看到如下目录：

这时，我们只需要iconfont.css文件就可以了，打开此文件，把所有代码复制到app.wcss文件中

到这里就已经完成大部分工作了。

接下来就可以修改icon.wxml文件了，代码如下：

<view>
 <icon class="iconfont icon-add-cart"></icon>
 <text>：这里是icon后面的文字</text>
</view>

结果;

但是，这里图标有太小了，怎么办呢，那就从css下手，把app.wcss中iconfont类下的font-size从16px改成93rpx，在微信中大小一般用rpx，结果展示：