在NativeScript Angular中，为什么这些图标没有居中显示？

Question

我想在NativeScript + Angular应用中使用FontAwesome字体。

我已按照on how to include fonts

的说明进行操作

我将FontAwesome.ttf文件添加到fonts目录并添加了

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

到app.css。

然后将fa样式应用于一个标签，该标签的文本具有所需图标的代码。我希望图标位于圆圈的中心。

我在NativeScript Playground

中建立了一个有效的示例

应用了“ fa”样式的任何字符都不会位于圆心。在Android和iOS上都会发生这种情况。

我做错了什么吗？这是一个错误吗？

我已经尝试了FontAwesome的当前版本和Playground链接中包含的较旧版本。我也尝试过“材料设计”图标。

我确实注意到，NativeScript + Angular Plugins Showcase app似乎没有发生这种情况，是基于Angular 6的，而我正在使用Angular 7.1。

this

Answer 1

我认为这可能是字体本身的问题，字体中的矢量带有其自己的位置/边距。一种解决方法是将circle类（圆角）应用于标签的父级，并将verticalAlignment设置为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