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インストールしてからやること