Vue.jsでFontAwesomeを使う方法(brands)

6052 ワード
Vue.js 初心者向け FontAwesome 初心者向け テキストリンク

FontAwesomeをVue.jsで使う方法

今回はVue.jsでTwitterアイコンやGithubアイコンを使いたかったのですが
Brandsアイコンを使用する時は少し他のアイコン使用と違い、実装に詰まったので下記が参考になれば嬉しいです。
※初心者が書いているので間違い等あれば教えて頂けると幸いです。

FontAwesomeとは

Get vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.

おしゃれなアイコン等がたくさん集まっています。画像等をインストールするより簡単です。
FontAwesome 公式サイト

FontAwesomeをターミナルにてインストールする

まずはターミナルで開発中のプロジェクトに移動し、FontAwesomeをインストールします。

% cd project-name

% npm install --save @fortawesome/fontawesome-svg-core 
% npm install --save @fortawesome/free-solid-svg-icons  
% npm install --save @fortawesome/free-regular-svg-icons
% npm install --save @fortawesome/free-brands-svg-icons

% npm install --save @fortawesome/vue-fontawesome

今回使用したいBrandsアイコンはfree-brands-svg-iconsの一行となります。
上の４行は自分が使いたいアイコンによってインストールしなくても良いものもあります。
詳しく知りたい方は公式サイトを参考にするのをお勧めします。

main.jsにFontAwesomeを使用する為の記述をする

main.js
/* Font awesomeを導入 */
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(fas,fab)

Vue.component('font-awesome-icon', FontAwesomeIcon)
/* ここまで */

実際に使用する為の記述をする

まずはuser-cicleという普通のアイコンを表示してみます。

About.vue

<p><font-awesome-icon icon="user-circle" />プロフィール</p>

こちらはちゃんと表示されました。

同じようにツイッターアイコンも表示してみると、何も表示されませんでした。

結果、下記のように記述する必要があります。

About.vue

<font-awesome-icon :icon="['fab', 'twitter']" size="2x" color="#1da1f2"/>
<font-awesome-icon :icon="['fab', 'github']" size="2x" color="black"/>

すると、表示されました！

ちなみに色や大きさを変更したい場合、上記のように size と color を指定することによって変更することができます。
また、このツイッターアイコンやQiitaアイコンに自分のアカウントをリンクさせたい場合、aタグで囲むことで実装できます。

About.vue
<a href="https://twitter.com/○○○○○○○"><font-awesome-icon :icon="['fab', 'twitter']" size="2x" color="#1da1f2"/></a>
<a href="https://github.com/○○○○○○○○"><font-awesome-icon :icon="['fab', 'github']" size="2x" color="black"/></a>

まとめ

公式サイトを見ればVue.js以外での使用方法も細かく説明が載っていました。
FontAwesomeを使用するとおしゃれなアイコンもたくさんあるので是非使ってみてください！

以上