Ionic 3导航标签栏设置search图标失败求助

正确的tabIcon写法 #

Ionic 3.x里，标签栏图标得按**ion-平台前缀-图标名**的格式写，Search图标对应的正确值：

• 安卓端用：ion-md-search
• iOS端用：ion-ios-search
  要是想让图标自动适配系统，直接写search也行，但得确保全局配置没毛病。

一步步排查解决 #

1. 先检查Ionicons字体有没有加载好
   打开index.html，看看有没有引入Ionicons的CDN链接（本地字体的话看文件路径），Ionic 3.9.4对应Ionicons 3.x版本，正确的CDN链接是：

   <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/3.0.0/css/ionicons.min.css">
   

   本地引入的话，得保证assets/fonts里有Ionicons的字体文件，而且variables.scss里的字体路径配置正确：

   $ionicons-font-path: "../assets/fonts";
   @import "ionic.globals";
   

2. 调整你的标签代码
   把原来的代码改成这样：

   <ion-tabs>
     <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" [rootParams]="apiuser"></ion-tab>
     <!-- 安卓专用图标 -->
     <ion-tab [root]="tab3Root" tabTitle="Search" tabIcon="ion-md-search" [rootParams]="apiuser"></ion-tab>
     <!-- 自动适配平台的写法 -->
     <ion-tab [root]="tab6Root" tabTitle="Search" tabIcon="search" [rootParams]="apiuser"></ion-tab>
   </ion-tabs>
   

3. 检查平台配置
   在app.module.ts里，确认IonicModule的配置没问题，或者在app.component.ts里初始化平台：

   import { Platform } from 'ionic-angular';
   
   constructor(platform: Platform) {
     platform.ready().then(() => {
       // 可添加平台相关初始化操作
     });
   }
   

4. 清缓存重新构建
   执行下面的命令清掉缓存再重新启动项目：

   ionic cordova clean
   ionic serve --clean
   

注意事项 #

• 别用md-search或者ion-search这种写法，Ionic 3.x不支持。
• 要是图标还不显示，打开浏览器控制台看看有没有404错误，大概率是字体文件没加载成功。

内容的提问来源于stack exchange，提问作者micex