NativeScript VueでFontAwesomeのアイコンを使う方法。
FontAwesome以外の他のフォントアイコンでも同様の方法が使える。
ダウンロード
まず、FontAwesomeのttfファイルを入手する。
以下からダウンロード。
注意するべき点としては、2020/2/5現在、v5系は使えないので、v4.7をダウンロードすること。
配置
ダウンロードした font-awesome-4.7.0.zip を解凍し、fonts/fontawesome-webfont.ttf というファイルを、NativeScript Vueプロジェクトの app/assets/fonts フォルダ内にコピーする
コピーしたファイルを、 FontAwesome.ttf にリネームする(これが重要)
使うための前準備
グローバルのスタイルシートである app/app.scss に以下を記述。
app/app.scss
.fa {
font-family: FontAwesome;
}
使い方
まず、使いたいアイコンフォントのユニコード文字列を知る必要がある。
FontAwesomeであれば、FontAwesomeで使いたいアイコンフォントのページを開くと、以下に表示されている。
ここでは、歯車のアイコンフォントが使いたい。
\uをプレフィックスとしてつければユニコード指定できる。
歯車アイコンの文字コードが f013 なので、ここでは、以下のように\uf013と指定する。
components/App.vue
<Button :text="'\uf013'" class="fa"></Button>
以下のように、アイコンフォントが表示されればOK。
