NativeScript + Vue でフォントアイコン(FontAwesome)を使う
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 に以下を記述。
.fa {
font-family: FontAwesome;
}
使い方
まず、使いたいアイコンフォントのユニコード文字列を知る必要がある。
FontAwesomeであれば、FontAwesomeで使いたいアイコンフォントのページを開くと、以下に表示されている。
ここでは、歯車のアイコンフォントが使いたい。
\u
をプレフィックスとしてつければユニコード指定できる。
歯車アイコンの文字コードが f013 なので、ここでは、以下のように\uf013
と指定する。
<Button :text="'\uf013'" class="fa"></Button>
Author And Source
この問題について(NativeScript + Vue でフォントアイコン(FontAwesome)を使う), 我々は、より多くの情報をここで見つけました https://qiita.com/hosikiti/items/788b8cb6346c23c06e44著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .