web-dev-qa-db-ja.com

NativeScript + Vue.js + FontAwesome

FontAwesomeアイコンセットを使用してNativeScriptとVue.jsを介してアプリケーションを構築しようとしていますが、エラープロンプトメッセージが表示されないため、問題を特定できません。

私は忠実なものとしてドキュメントに従っていますが、何も起こりません。私はどこでも検索しますが..何もありません。

あなたがこれで私を助けることができるならば、私はとても感謝するでしょう。

ドキュメント： https://nativescript-vue.org/blog/using-fonticons/

ありがとう！

[〜＃〜]ソリューション[〜＃〜]

  • appフォルダーにfontsという名前のフォルダーを作成します
  • スタイルファイルを生成し、次のコードを配置します
.fa { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-regular-400'; }
.fas { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-solid-900'; }
.fab { font-family: 'Font Awesome 5 Free', 'font-awesome/fa-brands-400'; }

Font-familyの最初の部分は、フォントファミリーに名前を付けることです。コンマの後に、それらのフォントへのパスを記述します。

vue.jsnativescriptfont-awesomenativescript-vue
8
user3546128

BrandsとProFontAwesome 5フォントをNativeScript-Vueで機能させるには、ドキュメントの説明に従ってnativescript-fonticon、npm install nativescript-fonticon --saveをインストールします Fonticonsの使用 そしてFontAwesomeから両方のWebフォントをダウンロードしますおよびデスクトップフォント。ディレクトリapp/fontsで、Webダウンロードのwebfontsディレクトリから.ttfファイルを追加します。 iOSでは、デスクトップダウンロードのotfsディレクトリにある.otfファイルも必要なので、これらもapp/fontsディレクトリに追加し、.otfファイルのベース名の名前を一致するように変更します。 .ttfファイルの対応するベース名 enter image description here

app/assetsで、Webフォントダウンロードのcssディレクトリ（またはすべてのファイル）から対応するcssファイルを追加します。 enter image description here

次に、以下を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>
6
dmstack

FontAwesome4.7.0を使用して動作しました。バージョン5.0以降、font awesomeのパッケージが変更され、ttfの使用は推奨されなくなりました。おそらく、font awesome5.xの使用はnativescript-vueではより注意が必要です。

そこからダウンロードできます： https://fontawesome.com/v4.7.0/

ドキュメントで説明されているようにfontawesome-webfont.ttfを使用し、名前をFontAwesome.ttfに変更し、font-awesome.min.cssもコピーします

app.scssで、これを忘れないでください（フォントファミリーはttfファイルの名前です）

.fa {
   font-family: FontAwesome;
}

また、v4.7でアイコン名を確認することを忘れないでください。一部はv5の新機能です。

デバッグモードでは、アプリが起動すると、次のように表示されます。

JS: 'Collections to load: fa'
JS: '----------'
JS: 'Loading collection \'fa\' from file: ./fonts/FontAwesome.css'
JS: 'fa-glass: \\uf000'
JS: 'fa-music: \\uf001'
JS: 'fa-search: \\uf002'
JS: 'fa-envelope-o: \\uf003'
...
3
Duhoux Pierre-Louis