首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用Ionic2的字体

使用Ionic2的字体
EN

Stack Overflow用户
提问于 2017-03-12 13:13:39
回答 1查看 1.8K关注 0票数 4

如何在<ion-tab></ion-tab>中使用字体图标

我想做的是:

代码语言:javascript
运行
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2017-11-01 13:10:36

这里是我添加字体的解决方案,非常棒的 <ion-tab></ion-tab>

注意:确保你在你的离子项目中安装了正确的字体。

your-example.html

代码语言:javascript
运行
复制
<ion-tabs tabsPlacement="top" >
  <ion-tab [root]="tabAlgorithms" tabTitle="Algorithms" tabIcon="fa-sitemap" ></ion-tab>   
</ion-tabs>

your-example.scss

代码语言:javascript
运行
复制
.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";
    }

希望这能解决你的问题。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42747846

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档