Nuxt.js+BuefyでFont Awesome 5のアイコンを表示する


Nuxt.js+BuefyでFont Awesomeのアイコンを表示するための備忘録です。

Font Awesomeインストール

NuxtとかBuefyのインストールは済んでいるとして。Font Awesomeのインストールから書きます。ここではnpm使ってますが、yarnの方はyarnで。

$ npm install --save @fortawesome/fontawesome-free

nuxt.config.jsの設定

cssの読み込みを記述します。ここでは all.css で全部指定しますが、個別指定もできるみたいです。

  css: [
    '@fortawesome/fontawesome-free',
    '@fortawesome/fontawesome-free/css/all.css',
  ],

b-iconで使用

あとはBuefyのコンポーネント b-icon で使用できます。以下はユーザーアイコンを表示する例。

<b-icon pack="fas" icon="user" />

非常に便利ですな。

関連する記事


コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください