0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

#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の一行となります。
上の4行は自分が使いたいアイコンによってインストールしなくても良いものもあります。
詳しく知りたい方は公式サイトを参考にするのをお勧めします。

#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>

スクリーンショット 2020-11-09 6.48.08.png

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

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

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

About.vue

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

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

スクリーンショット 2020-11-09 6.58.31.png

ちなみに色や大きさを変更したい場合、上記のように 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を使用するとおしゃれなアイコンもたくさんあるので是非使ってみてください!

以上

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?