角度 – 字体与Ionic2令人敬畏

发布时间：2020-12-17 17:09:18 所属栏目：安全来源：网络整理

导读：如何使用 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]=

如何使用< 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>

解决方法

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

注意：确保在离子项目中正确安装了字体.

您-example.html的

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

您-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";
    }

希望这能解决你的问题.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!