Использование FontAwesome с Nativescript- Vue - PullRequest
Новая
       22

Использование FontAwesome с Nativescript- Vue

1 голос
/ 08 февраля 2020

Мне просто не удается использовать значки FontAwesome в моем приложении Nativescript- Vue. Если я просто хочу использовать обычную иконку, она прекрасно работает: 

<Label col="0" text.decode="&#xf279;" class="fa"></Label>

Но когда я хочу Solid (или, я полагаю, любой из других), нет любви. 

<Label col="0" text.decode="&#xf5da;" class="fa fas"></Label>

Я посмотрел так много инструкций, что мои глаза пересеклись. Сегодня я обновился до v5. Но я не думаю, что смог заставить работать solid раньше.

Ответы [ 2 ]

2 голосов
/ 18 февраля 2020

Я работаю с Nativescript- Vue и использую Nathan Walker плагин nativescript-fonticon . Он очень хорошо работает с FontAwesome 5.

Это очень просто в использовании.

  1. Установите плагин:

    npm install nativescript-fonticon --save

  2. Поместить значок шрифта .ttf файлы в app/fonts

    fa-brands-400.ttf fa-regular-400.ttf fa-solid-900.ttf

  3. Создать базовый класс (файл * css помещен в assets/scss/global.scss):

    .fa, .far { font-family: 'Font Awesome 5 Free', 'fa-regular-400'; font-weight: 400; } .fas { font-family: 'Font Awesome 5 Free', 'fa-solid-900'; font-weight: 900; } .fab { font-family: 'Font Awesome 5 Free', 'fa-brands-400'; font-weight: 400; }

  4. Скопируйте css в app где-нибудь. Я помещаю свои файлы в папку assets\css (я использую минимизированный формат):

    assets/css/all.min.css assets/css/brands.min.css assets/css/fontawesome.min.css assets/css/regular.min.css assets/css/solid.min.css

  5. Добавьте и загрузите плагин в main.js

    import { TNSFontIcon, fonticon } from 'nativescript-fonticon'

    // Load TNSFonticon TNSFontIcon.debug = true TNSFontIcon.paths = { fa: './assets/css/fontawesome.min.css', far: './assets/css/regular.min.css', fas: './assets/css/solid.min.css', fab: './assets/css/brand.min.css' } TNSFontIcon.loadCss() Vue.filter('fonticon', fonticon)

  6. Используйте компонент в своем коде:

    <Label class="fas" text="fa-chess-knight | fonticon"></Label>

0 голосов
/ 08 февраля 2020

Ничего, что я пробовал из инструкций V5, казалось, не работает. (Может быть, кто-то может написать явные инструкции для использования в Nativescript- Vue.)

Но, возвращаясь к старому, простые 

<Label col="0" text.decode="&#xf5da;" class="fas"></Label>

с 

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

И, должно быть, меня как-то перехватили при первой настройке, потому что fa-solid-900 на самом деле не было в моей папке [app.fonts][1]. : - |

Не уверен, что теперь будут делать все эти новые модные пакеты, которые я установил.

...