Установка.
Прежде всего, это скачать Font Awesome.
После загрузки исходников мы установим плагин NativeScript:
npm install nativescript-fonticon --save
Конфигурация.
Теперь переместим ранее загруженные файлы шрифтов в папку app / fonts. Например:
приложение / шрифты / fontawesome-webfont.ttf
Мы также должны переместить файл .css в папку ресурсов app / assets. Например:
app / assets / font-awesome.css
Теперь мы должны изменить URL-адрес в «@ font-face» в этом файле. Например:
@font-face { font-family: 'FontAwesome'; src: url('./fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('./fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('./fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('./fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('./fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('./fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }
После этого мы изменим файл app.scss и добавим класс «. fa».
// NativeScript core theme // @see https://docs.nativescript.org/ui/theme @import '~nativescript-theme-core/scss/forest'; // Override variables here @import '~nativescript-theme-core/scss/index'; // Global SCSS styling // @see https://docs.nativescript.org/ui/styling .fa { font-family: 'FontAwesome', 'fontawesome-webfont'; }
Мы почти закончили, осталось настроить плагин в файле main.js:
import {TNSFontIcon, fonticon} from 'nativescript-fonticon'; TNSFontIcon.debug = true; TNSFontIcon.paths = { 'fa': './assets/font-awesome.css' }; TNSFontIcon.loadCss(); Vue.filter('fonticon', fonticon);
Теперь мы можем использовать наши фонтиконы:
<Label class="fa" :text="'fa-map-o' | fonticon" />
Наслаждаться!