Vue.js 経由で Font Awesome を使用して小さなアイコンを実装する方法

この記事では主に Vue.js で Font Awesome の小さなアイコンを使用する方法を紹介します。必要な方は参考にしてください。1. Font Awesome をインストールします。

• 2. 設定 (ファイル src/main.js) では、インポートされたモジュールとロードされたモジュールのみがプロジェクトで使用できることに注意してください。この例では、coffee の使用のみを紹介します

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/vue-fontawesome

ログイン後にコピー

• 3. (任意の vue ファイルで) を使用します

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

ログイン後にコピー

• 4. レンダリング (赤い領域に表示される小さなアイコン)

• 以上がこの記事です。この記事が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

  
  関連する推奨事項:

Vue での要素フォーム検証の基本要素

以上がVue.js 経由で Font Awesome を使用して小さなアイコンを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。