FontIcon not working in ActionItem

[SGissubel]

Which platform(s) does your issue occur on?

• iOS emulator

tns version: 4.1.2 Cross-platform modules: "version": "4.1.1" "tns-ios": "version": "4.1.1"

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

Using fonticon with my Nativescript-angular app. I have followed all of the instructions and have even debugged several items.

It displays the icon in Label BUT the layout gets completely messed up:

<ActionBar [title]="user.userName">
...
  <Label
    class="fa"
    [text]="'fa-cog' | fonticon"
    ios.position="right"
    android.position="right"></Label>
</ActionBar>

Results in:

What I need is to use ActionItem:

<ActionBar [title]="user.userName">
  <ActionItem
    class="fa"
    [text]="'fa-user-plus' | fonticon"
    ios.position="left"
    android.position="left"></ActionItem>
  <ActionItem
    class="fa"
    [text]="'fa-cog' | fonticon"
    ios.position="right"
    android.position="right"></ActionItem>
</ActionBar>

But results in:

In my app.scss:

.fa {
  font-family: FontAwesome, fontawesome-webfont;
}

(I tried using a capital F in Font-family - no change.)

My app module:

import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptHttpModule } from 'nativescript-angular/http';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { TNSFontIconModule, TNSFontIconService } from 'nativescript-ngx-fonticon';

import { MinLengthDirective, IsEmailDirective } from "./directives/input.directive";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from './app.routing'
// TNSFontIconService.debug = true;
@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes),
    TNSFontIconModule,
    ReactiveFormsModule,
    TNSFontIconModule.forRoot({
            'fa': './assets/fontawesome.scss',
        })
  ],
  declarations: [
    MinLengthDirective,
    IsEmailDirective,
    AppComponent,
    ...navigatableComponents
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

In my fonts folder I have: fontawesome-webfont.ttf & FontAwesome.ttf

In my assets folder I have: fontawesome.css(the compiled form of -->) fontawesome.scss

Desired output:

[tsonevn]

Hi @SGissubel, Thank you for the provided code samples. Currently, while using IconFonts inside the ActionBar, you should use Label. For example:

<ActionBar title="Title"  class="action-bar">
  <ActionItem >
      <Label text="&#xf359;" class="icon" ></Label>
  </ActionItem>
  <ActionItem ios.position="right">
        <Label text="&#xf2bb;" class="icon" ></Label>
  </ActionItem>
</ActionBar>

I tested this case with the free version of Font Awesome. Bear in mind that for properly setting up the position of the Labels, you should set them inside the ActionItems. For your convenience, I am attaching sample project, which can be used for debugging. Archive.zip

[NathanWalker]

@SGissubel you can also use fonticon pipe on those Label's just as well there too.

[SGissubel]

Thanks folks! I used both solutions and worked like a CHARM!

[SGissubel]

But while I am here...

Any idea why the following wouldn't work?

<Button class="fa" width="20%" [text]="'fa-map-marked-alt' | fonticon"></Button>

It is apparently JUST that particular font icon. Most other things I try work:

But if I put in another icon... <Button class="fa" width="20%" [text]="'fa-map-pin' | fonticon"></Button>

I also tried:

fa-map-marker-alt

But I get the same question-mark box.

[NathanWalker]

Check the CSS and make sure that icon class is actually in the styles. Sometimes depending on version the docs may reference an icon which may have not been in the version of css at the time you downloaded. Just search the .css for that classname.

[SGissubel]

[SGissubel]

I have had A few weird similar issue like the previous.

For example - I also just get nothing at all for this:

<Label flexGrow="1" class="fa icon-utensil" [text]="'fa-utensils' | fonticon"></Label>

Which doesn't show up at all...

But I also checked the css for fa-utensils and it also does exist.

[NathanWalker]

What’s in your icon-utensil class there?

[SGissubel]

Currently nothing. I attempted to set color: black; but it did nothing.

[NathanWalker]

You might post whole template or at least the bottom tabbar setup. Sometimes things like that could be the position is not where you might expect especially when using flex layout rules.

[SGissubel]

Flex was one of many I tried. haha.

This is actually a child component.

Parent:

<GridLayout rows="150, 200, *">
    <StackLayout row="0">
        <profile-head
            [profileUser]="user">

        </profile-head>
    </StackLayout>

    <StackLayout row="1">
        <profile-nav row="1">
        </profile-nav>
    </StackLayout>

    <Label row="2"></Label>
</GridLayout>

Child: including some of the different attempts commented out

<!-- <GridLayout columns="*, *, *, *" class="profile-head" > -->
        <GridLayout col="0" orientation="horizontal" horizontalAlignment="center">
            <Label class="fa" [text]="'fa-list-ul' | fonticon"></Label> -->
                </GridLayout>

        <GridLayout col="1" orientation="horizontal" horizontalAlignment="center">
        <Label class="fa" [text]="'fa-utensils' | fonticon"></Label>
      </GridLayout>

        <GridLayout col="2" orientation="horizontal" horizontalAlignment="center">
        <Label class="fa" [text]="'fa-calendar' | fonticon"></Label>
      </GridLayout>

        <GridLayout col="3" orientation="horizontal" horizontalAlignment="center">
        <Label class="fa" [text]="'fa-bookmark' | fonticon"></Label>
      </GridLayout>

<!-- </GridLayout> -->

<FlexboxLayout flexDirection="row">
    <!-- Use even flexGrow to achieve uniform grid -->
    <Label flexGrow="1" class="p-15 text-center font-weight-bold fa" [text]="'fa-list' | fonticon"></Label>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold fa icon-utensil" [text]="'fa-utensils' | fonticon"></Label>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold fa" [text]="'fa-calendar' | fonticon"></Label>
    <Label flexGrow="1" class="p-15 text-center font-weight-bold fa" [text]="'fa-bookmark' | fonticon"></Label>

</FlexboxLayout>

[NickIliev]

@SGissubelI've stumbled upon similar issue - some specific icons from FontAwesome5 are not shown while most are working as expected. In my case, it appeared that some icons are shown only when using a specific font variant.

For example, for the icon fa-marked-map-alt only the solid font is working

<!-- Works as expectedv with fas map-marked-alt -->
<Label class="fas" text="&#xf041;">
</Label>

<!-- WON'T WORK far map-marked-alt -->
<Label class="far" text="&#xf041;">
</Label>

<!-- WON'T WORK with fab map-marked-alt -->
<Label class="fab" text="&#xf041;">
</Label>

where the fas, far and fab are the following fonts in my CSS

.far {
    font-family: Font Awesome 5 Free, fa-regular-400;
    font-weight: 400; 
}

.fab {
    font-family: Font Awesome 5 Brands, fa-brands-400;
    font-weight: 400; 
}

.fas {
    font-family: Font Awesome 5 Free, fa-solid-900;
    font-weight: 900; 
}

Test app demonstrating the above here.

Closing the issue as the main problem has been answered with a solution.