Как использовать фонтикон внутри NativeScript <Button> - PullRequest
Новая
       9

Как использовать фонтикон внутри NativeScript <Button>

0 голосов
/ 17 января 2019

Я сталкиваюсь с конфликтом семейств шрифтов при попытке использовать значок шрифта на <Button>.

Например: 

<Button class="btn btn-primary fas" text="{{'fa-film' | fonticon}} Test"></Button>

CSS: 

.fas {
  font-family: 'Font Awesome 5 Free Solid', fa-solid-900;
}

При использовании тем Nativescript определяет font-family для класса .btn. Как вы знаете, иконографические шрифты также полагаются на font-family.

Итак, как в приведенной выше кнопке применить один font-family к строке Test, а другой font-family к значку?

Если вы используете начальное приложение NativeScript Angular SASS , задаете .fas в _app-common.scss и используете мою кнопку выше, вы увидите, что значок отображается как?. Это потому, что .btn перекрывает font-family.

Я мог бы решить эту проблему, назначив значку font-family более высокий приоритет - но это помешало бы мне стилизовать текстовый шрифт на кнопке.

Не-нативные реализации значков шрифтов внутри кнопок решают эту проблему, имея возможность поместить элемент (например, <span>) как дочерний элемент в <Button>. Пример здесь .

Как это сделать с помощью NativeScript <Button>?

1 Ответ

0 голосов
/ 17 января 2019

Ответ должен использовать FormattedString .Это позволяет применять class к каждому элементу.

Пример: 

<Button (tap)="onTap($event)" class="btn btn-primary">
    <FormattedString>
        <Span class="fas" text="{{'fa-film' | fonticon}}"></Span>
        <Span text=" Test" fontAttributes="Bold"></Span>            
    </FormattedString>
</Button>
...