Ionic2 字体真棒答案

【问题标题】：Font Awesome with Ionic2Ionic2 字体真棒
【发布时间】：2017-03-12 13:13:39
【问题描述】：

如何在<ion-tab></ion-tab> 中使用 Font Awesome 图标？

我正在尝试什么：

<ion-tabs>
    <ion-tab [root]="tab1Root" class="fa fa-calculator" tabTitle="Home" ></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="fa-calculator"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

【问题讨论】：

标签： angular ionic2

【解决方案1】：

这是我添加 Font Awesome <ion-tab></ion-tab>

的解决方案

注意：确保您已在您的 ionic 项目中正确安装了 font awesome。

你的例子.html

<ion-tabs tabsPlacement="top" >
  <ion-tab [root]="tabAlgorithms" tabTitle="Algorithms" tabIcon="fa-sitemap" ></ion-tab>   
</ion-tabs>

你的例子.scss

.fa-icons-general {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

.ion-ios-fa-sitemap::before,
    .ion-ios-fa-sitemap-outline::before,
    .ion-md-fa-sitemap::before {
        @extend .fa-icons-general;
        content: "\f0e8";
    }

希望这能解决您的问题。

【讨论】：