В NativeScript Angular почему эти значки не отображаются по центру? - PullRequest
Новая
       29

В NativeScript Angular почему эти значки не отображаются по центру?

0 голосов
/ 01 февраля 2019

Я хотел бы использовать шрифты FontAwesome в приложении NativeScript + Angular.

Я следовал инструкциям о том, как включить шрифты

Я добавил FontAwesome.файл ttf в каталог шрифтов и добавлен 

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

в app.css.

А затем я применяю стиль fa к метке, текст которой содержит код для значка, который я хочу,Я бы хотел, чтобы иконка была в центре круга.

Я создал рабочий пример на NativeScript Playground

Любой символ, к которому применен стиль 'fa', не центрируется в круге.Это происходит как под Android, так и под iOS.

Я что-то делаю неправильно или это ошибка?

Я пробовал как текущую версию FontAwesome, так и более старую версию, которую я включил в ссылку Playground.Я также пробовал иконки материалов дизайна.

Я заметил, что этого не происходит в приложении NativeScript + Angular Plugins Showcase , которое основано на Angular 6, где я работаю сУгловой 7.1.

Why aren't these icons centered in the circles?

1 Ответ

0 голосов
/ 01 февраля 2019

Я думаю, что это может быть проблема с самим шрифтом, вектор в шрифте идет со своим собственным позиционированием / полем.В качестве обходного пути можно применить класс 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>

Обновленная игровая площадка

...