Чтобы шрифты Brands и Pro FontAwesome 5 работали в NativeScript-Vue, установите nativescript-fonticon, npm install nativescript-fonticon --save, как описано в документации Использование фонтиконов ,
а из FontAwesome можно загрузить как веб-шрифты, так и настольные шрифты. В каталог app/fonts добавьте файлы .ttf из каталога webfonts веб-загрузки. iOS также требует файлы .otf из каталога otfs загрузки рабочего стола, поэтому добавьте их также в каталог app/fonts и переименуйте базовое имя файлов .otf в соответствии с соответствующим базовым именем файла .ttf
В app/assets добавьте соответствующие css-файлы из каталога css загружаемого веб-шрифта (или всего файла).
Теперь добавьте следующее к app.scss (обратите внимание, что свет и тело не работают должным образом без font-weight, правильно определенного)
.fa {
font-family: "Font Awesome 5 Pro", "fa-regular-400";
font-weight: 400;
}
.fas {
font-family: "Font Awesome 5 Pro", "fa-solid-900";
font-weight: 900;
}
.fab {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
font-weight: 400;
}
.fal {
font-family: "Font Awesome 5 Pro", "fa-light-300";
font-weight: 300;
}
и следующие до main.ts
import {TNSFontIcon, fonticon} from 'nativescript-fonticon';
TNSFontIcon.debug = true;
TNSFontIcon.paths = {
// 'fa': './assets/css/all.min.css',
// 'fal': './assets/css/all.min.css',
// 'far': './assets/css/all.min.css',
// 'fas': './assets/css/all.min.css',
// 'fab': './assets/css/all.min.css',
'fa': './assets/css/fontawesome.min.css',
'fal': './assets/css/light.min.css',
'far': './assets/css/regular.min.css',
'fas': './assets/css/solid.min.css',
'fab': './assets/css/brands.min.css'
};
TNSFontIcon.loadCss();
Vue.filter('fonticon', fonticon);
Теперь удалите каталог platforms, чтобы убедиться, что все идет правильно, и вы должны быть готовы. Используйте это как
<StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="top">
<Label class="fab" :text="'fa-git' | fonticon" />
<Label class="fal" :text="'fa-plus-square' | fonticon" />
<Label class="fa" :text="'fa-plus-square' | fonticon" />
<Label class="fas" :text="'fa-plus-square' | fonticon" />
</StackLayout>
Чтобы сделать все еще проще, есть плагин Vue-Fonticon , который по сути является следующим кодом, который я скопировал в app/components/FontIcon.vue
<template>
<Label
:class="type"
:color="color"
:fontSize="size"
:text="name | fonticon"
:width="size"
textAlignment="center"
@tap="$emit('tap')"
/>
</template>
<script>
export default {
name: 'FontIcon',
props: {
color: {
type: String,
default: 'black'
},
name: {
type: String,
required: true
},
size: {
type: [String, Number],
default: 15,
validation: s => !isNaN(s)
},
type: {
type: String,
default: 'fa'
}
}
}
</script>
Чтобы использовать его, в main.ts добавьте
import FontIcon from './components/Utility/FontIcon.vue'
Vue.component(FontIcon.name, FontIcon)
и используйте его как
<StackLayout orientation="horizontal" horizontalAlignment="center" verticalAlignment="top">
<FontIcon name="fa-play"/>
<FontIcon name="fa-play" type="fal"/>
<FontIcon name="fa-play" type="fas"/>
<FontIcon name="fa-git" type="fab"/>
</StackLayout>