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>

推荐答案

这是我添加Font Awesome的解决方案 <ion-tab></ion-tab>

Here is my solution to add Font Awesome <ion-tab></ion-tab>

注意:确保你在你的 ionic 项目中正确安装了 font awesome.

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

你的例子.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";
    }

希望这能解决您的问题.

Hope this will solve your problem.

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