【问题标题】: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 &lt;ion-tab&gt;&lt;/ion-tab&gt;

    的解决方案

    注意:确保您已在您的 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";
        }
    

    希望这能解决您的问题。

    【讨论】:

      猜你喜欢
      • 2020-09-24
      • 2014-08-02
      • 2017-12-31
      • 2015-01-23
      • 2017-06-26
      • 2017-12-20
      • 2014-03-02
      • 2014-12-09
      • 1970-01-01
      相关资源
      最近更新 更多