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" />

非常に便利ですな。

関連する記事

• 【factory_girl】子のファクトリ生成時に親の属性をまとめて設定する
• Protractor+CoffeeScriptでAngularJSをE2Eテスト
• Rails + simple_form + Foundation 5 チュートリアル
• Rails用のgemを作成する手順 (Rails 4.0以降)
• Ubuntu 22.04インストールしてからやること