はじめに

Vue.js で FontAwesome を使う方法について整理した。

TL;DR

npm で FontAwesome 関連のパッケージをインストール
new Vue する前にライブラリのインポートと使用するアイコンの設定
<font-awesome-icon :icon="[]" /> タグで表示

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15
BuildVersion:	19A583

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls vue
vue@2.6.10 | MIT | deps: none | versions: 250

$ npm ls | grep @fortawesome
@fortawesome/fontawesome-svg-core@1.2.25
@fortawesome/fontawesome-common-types@0.2.25
@fortawesome/free-brands-svg-icons@5.11.2
@fortawesome/free-regular-svg-icons@5.11.2
@fortawesome/free-solid-svg-icons@5.11.2
@fortawesome/vue-fontawesome@0.1.7

詳細

Vue.js | Font Awesome に「公式コンポーネントがあるよ」とあるので、@fortawesome/vue-fontawesome を使えば OK。

Font Awesome now has an official Vue.js component that’s available for all who want to use our icons in their Vue.js projects.

インストール

Free 版を使うなら以下をインストール。

$ npm i @fortawesome/fontawesome-svg-core \
        @fortawesome/free-solid-svg-icons \
        @fortawesome/free-brands-svg-icons \
        @fortawesome/free-regular-svg-icons \
        @fortawesome/vue-fontawesome

Pro 版も使うなら以下も一緒にインストールし、Installing the Pro version of Font Awesome の内容に従ってセットアップすれば良いと思われる。

$ npm i @fortawesome/pro-solid-svg-icons \
        @fortawesome/pro-regular-svg-icons \
        @fortawesome/pro-light-svg-icons \
        @fortawesome/pro-duotone-svg-icons

使用方法

基本的な流れ

new Vue の前に import やら設定を行う。

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core';
// ↓は使いたいアイコン
// bookmark(https://fontawesome.com/icons/bookmark?style=solid) を使いたい場合は faBookmark
import { faBookmark } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

// FontAwesome Setup
library.add(faBookmark);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount("#app");

あとは xxxx.vue 内で <font-awesome-icon :icon="[]" /> で表示できる。↑ で、Solid の bookmark アイコンを読み込んでいるので、:icon="['fas', 'bookmark']" を使う。

<template>
  <div id="app">
    <font-awesome-icon :icon="['fas', 'bookmark']" />
  </div>
</template>

Solid, Regular, Brands を使う

import するライブラリを変更することで Solid, Regular, Brands を使い分けることができる。

Solid

Heart Icon | Font Awesome

...
import { faHeart } from '@fortawesome/free-solid-svg-icons';
...
library.add(faHeart);
...

1 2	<!-- Solid は fas --> <font-awesome-icon :icon="['fas', 'heart']" />

Regular

Heart Icon - Regular | Font Awesome

...
import { faHeart } from '@fortawesome/free-regular-svg-icons';
...
library.add(faHeart);
...

1 2	<!-- Regular は far --> <font-awesome-icon :icon="['far', 'heart']" />

Brands

Apple Icon - Brands | Font Awesome

...
import { faApple } from '@fortawesome/free-brands-svg-icons';
...
library.add(faApple);
...

1 2	<!-- Brands は fab --> <font-awesome-icon :icon="['fab', 'apple']" />

複数のアイコンを使う

import や library.add 時にカンマ区切りで使いたいアイコンを指定する。

...
import { faBookmark, faHeart } from '@fortawesome/free-solid-svg-icons';
...
library.add(faBookmark, faHeart);
...

全てのアイコンを使う

いちいち使いたいアイコンを探して追加して〜が面倒な場合は、fas, far, fab でアイコン全体を import できる。

1
2
3

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

※当然、サイズが大きくなるので注意が必要。1〜2,3 アイコンしか使わないのであれば、個別に import した方が軽量になる。(開発初期は全体ロードしておいて、使うアイコンが決まったら個別ロードに修正する、というのが良さそう)

スタイル調整

<i class="fas fa-camera fa-2x"></i> などでサイズ変更ができる機能は、@fortawesome/vue-fontawesome でも利用可能。

Features から良く使いそうなものをいくつか抜粋。

サイズ変更

size 属性を指定する。xs, sm, lg, 2x, 3x, … が利用可能。

1
2
3

<font-awesome-icon :icon="['fas', 'heart']" size="xs" />
<font-awesome-icon :icon="['fas', 'heart']" size="lg" />
<font-awesome-icon :icon="['fas', 'heart']" size="3x" />

回転

rotation 属性で回転する角度(時計回り)を指定。

1
2
3

<font-awesome-icon :icon="['far', 'heart']" rotation="90" />
<font-awesome-icon :icon="['far', 'heart']" rotation="180" />
<font-awesome-icon :icon="['far', 'heart']" rotation="270" />

flip 属性で点対称の回転も設定可能。

<font-awesome-icon :icon="['fab', 'apple']" />
<font-awesome-icon :icon="['fab', 'apple']" flip="horizontal" />
<font-awesome-icon :icon="['fab', 'apple']" flip="vertical" />
<font-awesome-icon :icon="['fab', 'apple']" flip="both" />

アニメーション

spinners カテゴリのアイコンはアニメーション設定ができる。

spin 属性や、pulse 属性を指定する。

<font-awesome-icon :icon="['fas', 'cog']" />
<font-awesome-icon :icon="['fas', 'cog']" spin />
<font-awesome-icon :icon="['fas', 'cog']" pulse />
<font-awesome-icon :icon="['fas', 'cog']" spin pulse />

枠線

border 属性を指定。

1 2	<font-awesome-icon :icon="['far', 'heart']" /> <font-awesome-icon :icon="['far', 'heart']" border />

マスキング(アイコンを重ねるその1)

mask 属性に重ねるアイコンを指定。

1 2	<font-awesome-icon :icon="['fab', 'airbnb']" /> <font-awesome-icon :icon="['fab', 'airbnb']" :mask="['fas', 'square-full']" />

レイヤリング(アイコンを重ねるその2)

事前設定が必要。

...
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
...
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
...

<font-awesome-layers /> で囲む。<font-awesome-layers /> に size 属性が指定できるか試したけど、class="fa-xx" じゃないと効かなかった。

<font-awesome-layers class="fa-lg">
  <font-awesome-icon :icon="['fas', 'circle']" />
  <font-awesome-icon :icon="['fas', 'check']" transform="shrink-6" :style="{ color: 'white' }" />
</font-awesome-layers>
<font-awesome-layers class="fa-lg">
  <font-awesome-icon :icon="['fas', 'circle']" />
  <font-awesome-icon :icon="['fas', 'check']" size="xs" :style="{ color: 'white' }" />
</font-awesome-layers>

アイコンに文字を重ねる

事前設定が必要。

...
import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome';
...
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
Vue.component('font-awesome-layers-text', FontAwesomeLayersText);
...

<font-awesome-layers /> で囲んで、<font-awesome-layers-text /> を使う。

<font-awesome-layers full-width class="fa-4x">
  <font-awesome-icon :icon="['fas', 'chess-queen']" />
  <font-awesome-layers-text transform="down-2 shrink-8" value="Q" :style="{ color: 'white' }" />
</font-awesome-layers>

まとめ

npm で FontAwesome 関連のパッケージをインストール
new Vue する前にライブラリのインポートと使用するアイコンの設定
<font-awesome-icon :icon="[]" /> タグで表示

Vue.js で FontAwesome を使う方法

はじめに

TL;DR

目次

環境・条件

詳細

インストール

使用方法

基本的な流れ

Solid, Regular, Brands を使う

Solid

Regular

Brands

複数のアイコンを使う

全てのアイコンを使う

スタイル調整

サイズ変更

回転

アニメーション

枠線

マスキング(アイコンを重ねるその1)

レイヤリング(アイコンを重ねるその2)

アイコンに文字を重ねる

まとめ

参考文献

関連記事

r17n

Vue.js で FontAwesome を使う方法

はじめに

TL;DR

目次

環境・条件

詳細

インストール

使用方法

基本的な流れ

Solid, Regular, Brands を使う

Solid

Regular

Brands

複数のアイコンを使う

全てのアイコンを使う

スタイル調整

サイズ変更

回転

アニメーション

枠線

マスキング(アイコンを重ねる その1)

レイヤリング(アイコンを重ねる その2)

アイコンに文字を重ねる

まとめ

参考文献

関連記事

r17n

Hexo でブログを作成して Netlify で公開するまで

はじめに

TL;DR

目的・やったこと

Python で MySQL の操作が可能な ORM peewee

はじめに

Git で#から始まるコミットメッセージを登録

はじめに

TL;DR

目的・やったこと

Python requests で画像をダウンロードして保存する方法

はじめに

TL;DR

目的・やったこと

Rails で既存の DB を利用するアプリケーションの作成方法(DB 参照のみ)

はじめに

TL;DR

目的・やったこと

Python boto3 で AWS S3 を操作する

はじめに

TL;DR

目的・やったこと

Python requests + boto3 で AWS S3 に画像を直接アップロード

はじめに

TL;DR

目的・やったこと

Node.js で BTC の単位変換する satoshi-bitcoin

はじめに

TL;DR

目的・やったこと

JavaScript で setTimeout や addEventListener のコールバック関数に引数を渡す方法

はじめに

TL;DR

目的・やったこと

Node.js でディレクトリごとにバージョンを変更する nodenv

はじめに

TL;DR

目的・やったこと

マスキング(アイコンを重ねるその1)

レイヤリング(アイコンを重ねるその2)