时间戳

首页 > 解决方案 > 在 NativeScript Angular 中，为什么这些图标没有居中显示？

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

问题描述

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

我已按照有关如何包含字体的说明进行操作

我将 FontAwesome.ttf 文件添加到字体目录并添加

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

到 app.css。

然后我将 fa 样式应用于一个标签，该标签的文本是我想要的图标的代码。我希望图标以圆圈为中心。

我在NativeScript Playground中设置了一个工作示例

任何应用了 'fa' 样式的字符都不会在圆圈中居中。这在 Android 和 iOS 下都会发生。

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

我已经尝试过当前版本的 FontAwesome 和包含在 Playground 链接中的旧版本。我也尝试过 Material Design Icons。

我确实注意到这似乎不会发生在基于 Angular 6 的NativeScript + Angular Plugins Showcase 应用程序中，因为我正在使用 Angular 7.1。

为什么这些图标不在圆圈的中心？

标签： androidiosangularnativescriptfont-awesome

解决方案

我认为这可能是字体本身的问题，字体中的矢量带有自己的定位/边距。一种解决方法可能是将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>

更新游乐场

推荐阅读