Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
88
Help us understand the problem. What is going on with this article?
@kurararara

Font awesome を Vue.js で使ってみよう

More than 1 year has passed since last update.

Font awesome is 何?

公式によると

Icons. Easy. Done.

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

なツールキットです!

画像を用いるよりアイコンを利用するほうが便利なときがありますよね。

Font awesome は可愛い・かっこいいアイコンがたくさん用意されていて、使い方も簡単なのでおすすめです!

(昔は Qiita 内でも使えたりしたんですよー)

:link: Font awesome 公式

Font awesome をインストール

まずはプロジェクトへ移動して。

> cd my-project

次のコマンドでインストールします。

  • Yarn を使った場合
> yarn add @fortawesome/fontawesome-svg-core
> yarn add @fortawesome/free-solid-svg-icons
> yarn add @fortawesome/vue-fontawesome
  • npm を使った場合
> npm install --save @fortawesome/fontawesome-svg-core
> npm install --save @fortawesome/free-solid-svg-icons
> npm install --save @fortawesome/vue-fontawesome

Font awesome が用意しているアイコンには他にもあります。

  1. Solid(上でインストール済み)
  2. Regular
  3. Light(有料プランのみ)
  4. Brands

必要な場合はインストールしましょう。


> yarn add @fortawesome/free-regular-svg-icons
> yarn add @fortawesome/pro-regular-svg-icons
> yarn add @fortawesome/free-brands-svg-icons

Vue.js で使うには?

main.js に次のようにコーディングします。

src/main.js
import Vue from 'vue'
import App from './App.vue'

/* ここから */
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

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

Vue.config.productionTip = false

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

後はテンプレートにアイコン用のタグを埋め込むだけで使用することができます。

補足

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

この部分で library にアイコンを追加しているわけですが、複数追加したい場合はカンマ区切りで複数のアイコンを追加できます。

import { faCoffee, faSpinner } from '@fortawesome/free-solid-svg-icons'
// ...
library.add(faCoffee, faSpinner)

アイコン一個一個だなんてめんどい...って人はこんな感じに全部追加できます。

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

ちなみに私の設定は...

import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
// ...
library.add(fas, far, fab)

めんどくさがり屋って言わないで

確認しよう

About ページにアイコンを表示してみましょう!

src/views/About.vue
<template>
  <div class="about">
    <h1>This is an about page <font-awesome-icon icon="coffee" /></h1>
  </div>
</template>

アプリ起動して。

> cd my-project
> yarn serve

http://localhost:8080/about にアクセスです!

display font awesome.png

いえい!

まとめ

Vue.js は単一ファイルコンポーネントなので import したりコンポーネントとして登録したりひと手間あります。

普通にクラス指定で使えばいいんじゃない?とか思っちゃいますけど まあ、このあたりは慣れになると思いますが、フレームワークの推奨する使い方に従って使ったほうがいいのかな?

:link: Font awesome - How to Use Vue

インデックスページから来た人向け

アプリにアイコンが表示されると洗練された感じが出てきますよね~(思い込み)

これから少しづつ機能を増やしていきますので、よかったら他の記事も見てみてください!

:link: Vue.js 初心者がなにか作りきってみる(願望)

88
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kurararara
for(;;)alert('私が町長です。');
peoplesoftware
主にJavaやC#を使った受託開発や、BaaSなどのクラウドサービス、スマホアプリの自社開発を行っている会社です。※各記事の内容は個人の見解であり、所属する会社の公式見解ではありません。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
88
Help us understand the problem. What is going on with this article?