android - 在 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 链接中包含的旧版本。我也尝试过 Material Design 图标。

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

Answer 1

我认为这可能是字体本身的问题，字体中的矢量有自己的定位/边距。解决方法可以是将 circle 类(圆 Angular 边缘)应用于标签的父级，并将 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