In NativeScript Angular why aren't these icons showing up centered?

Question

I would like to use FontAwesome fonts in a NativeScript + Angular app.

I have followed the instructions on how to include fonts

I added the FontAwesome.ttf file to the fonts directory and added

.fa {
font-family: "FontAwesome", FontAwesome;
}

to app.css.

And then I apply the fa style to a label that has as its text the code for the icon I want. I would like the icon to be centered in the circle.

I've set up a working example in the NativeScript Playground

Any character that has the 'fa' style applied is not centered in the circle. This happens under both Android and iOS.

Am I doing something incorrectly or is this a bug?

I have tried both the current version of FontAwesome and the older one that I've included in the Playground link. I have also tried Material Design Icons.

I do notice that this does not appear to happen in the NativeScript + Angular Plugins Showcase app which is based on Angular 6 where as I am working with Angular 7.1.

Manoj Manoj · Accepted Answer · 2019-02-01T20:04:16

I think it could be the issue with font itself, the vector in the font comes with its own positioning / margin. A workaround could be applying circle class (rounded edges) to the label's parent and set verticalAlignment to center

        <StackLayout class="circle" verticalAlignment="center">
            <Label class="fa" text="&#xf018;"></Label>
        </StackLayout>
        <StackLayout class="circle" verticalAlignment="center">
            <Label class="fa" text="XX"></Label>
        </StackLayout>

Updated Playground

In NativeScript Angular why aren't these icons showing up centered?

1 Answers