字体真棒与Ionic2 [英] Font Awesome with Ionic2

问题描述

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

How to use Font Awesome icons with <ion-tab></ion-tab>?

我在尝试什么：

<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>

推荐答案

这是我添加字体真棒的解决方案 < ion-tab>< / ion-tab>

注意：确保你已经在您的离子项目中正确安装了字体。

Note: Make sure you have properly installed font awesome in your ionic project.

your-example.html

your-example.html

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

your-example.scss

your-example.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";
    }

希望这能解决您的问题。

Hope this will solve your problem.

这篇关于字体真棒与Ionic2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！