FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Icon fonts not working for TabView tabs title on iOS · Issue #4302 · NativeScript/NativeScript · GitHub

Icon fonts not working for TabView tabs title on iOS #4302

Description

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, looked for similar issues and solution.
Looked at: #1217
and NativeScript/nativescript-angular#364

Tell us about the problem

Not able to display icon fonts on TabView tabs title on iOS after updating to NS 3.0 using Typescript(No Angular). Icon fonts are working fine in Android tabview.

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

  • CLI: 3.0.2
  • Cross-platform modules: (check the 'version' attribute in the
    node_modules/tns-core-modules/package.json file in your project)
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
    package.json file of your project)
  • Plugin(s): (look for the version number in the package.json file of your
    project)
    ┌──────────────────┬─────────────────┬
    │ Component │ Current version │ Latest version │ Information │
    │ nativescript │ 3.0.2 │ 3.0.2 │ Up to date │
    │ tns-core-modules │ 3.0.1 │ 3.0.1 │ Up to date │
    │ tns-android │ 3.0.1 │ 3.0.1 │ Up to date │
    │ tns-ios │ 3.0.1 │ 3.0.1 │ Up to date │
    └──────────────────┴─────────────────┴

Please tell us how to recreate the issue in as much detail as possible.

Create a TabView and in TabViewItem set title to use an icon font (using FontAwesome in my case). You can use the sample codes below:

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="Icon Font Test" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <TabView tabTextColor="red" androidSelectedTabHighlightColor="red" selectedTabTextColor="green" loaded="mainContentLoaded" id="tabView1">
         <TabView.items>
            <TabViewItem title="&#xf003; All" class="mati">
              <TabViewItem.view>
                <Label horizontalAlignment="center" text="&#xf003;" class="mati"/>
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf0a2; Notifications" class="mati">
              <TabViewItem.view>
                <Label horizontalAlignment="center" text="&#xf0a2;" class="mati"/>
              </TabViewItem.view>
            </TabViewItem>
            <TabViewItem title="&#xf044; Requests" class="mati">
              <TabViewItem.view>
                <Label horizontalAlignment="center" text="&#xf044;" class="mati"/>
              </TabViewItem.view>
            </TabViewItem>
          </TabView.items>
    </TabView>
</Page>
.btn {
    font-size: 18;
}
 
.mati {
    font-family: fontawesome, FontAwesome;
}

Images for reference:

on iOS

on Android

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugos: iosready for testTSC needs to test this and confirm against live production apps and automated test suitesseverity: high

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions


    Back | FazBrowse Home | New Git URL