"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

Nxut+CSSフレームワーク「Buefy」でアイコンセット「Font Awesome」を使う方法

f:id:arakan_no_boku:20190509225706p:plain

目次

はじめに

リライトして目次を追加しました。

内容は2019年5月当時のままです。

僕がNuxt.jsの各機能を理解するために、ひとつひとつ確認したことをまとめていこうと考えています。

インストール・環境構築は、以下の手順でできている前提です。

arakan-pgm-ai.hatenablog.com

Nuxt.jsを整理する方針

Nuxt.js関連資料やサンプルソースを見ると混乱することが多いのは、Nuxt.jsはVue.jsの機能を包含していて、ひとつのソースの中で、どれがNuxt.js特有の機能で、どれがVue.jsの機能かの区別がつけにくいからだと感じています。

その混在しているイメージを図にしてみると、こんな感じに見えます。

f:id:arakan_no_boku:20190511100242p:plain

なので、僕はアプローチとして、各技術要素にわけて、一回に少しずつ要素を確認していくことにしました。

分け方としては、以下のようになると考えています。

  1. Nuxt.js独自の要素ー基本
  2. Vue.js独自の要素
  3. BulmaのCSS要素(Burfyのclassは、Bulmaを使っている場合が多い)
  4. Buefy独自の要素
  5. Nuxt.js独自の要素ー応用
  6. テストフレームワーク他モジュールの要素

今回は、Nuxtアプリで体裁を整える部分にかかるのですが、上記リストには書いていないフォントについて取り上げます。

 

アイコンセット「Font Awesome

「Font Awesome」は、Freeで使えるものが約1500位あります。

fontawesome.com

もし、仕事で使うなら有償のPRO版がいいな・・と思うのですが、個人的な勉強のために使うくらいなら十分なボリュームです。

なんで、「Font Awesome」を突然とりあげるかというと、UIフレームワークの「Buefy」と「Font Awesome」は相性がいいからです。

 

Font Awesomeを使ったサンプル

今回は、アイコンのサンプルをタイルレイアウトで並べてみます

f:id:arakan_no_boku:20190525012146p:plain

枠の中に表示しているアイコンが「Font Awesome」です。

Nxut+BuefyでFont Awesomeを使う方法

まず、「Font Awesome」をCSSで読み込む必要があります。

「Font Awesome」をCSSで読み込む設定

nuxt.config.jsに以下を追記します。

head:{}の内側にlink:があるので、そこに追記する感じです。

nuxt.config.js

link: [
    { rel: 'stylesheet', href: 'https://use.fontawesome.com/releases/v5.2.0/css/all.css' }
]

 これで、<b-icon>で指定できるようになります。

<b-icon>タグの使い方

Font Awesomeは、Nuxtの「b-icon」タグを使って表示します。

指定の仕方の例です。

<b-icon

    pack="fas"

    icon="box-open"

    size="is-large"

    type="is-primary">

</b-icon>

アイコンの種類は「pack」と「icon」の2つで指定します。

sizeは以下のうちから選びます。

  • is-small
  • is-medium
  • is-large  

typeで色目を決めます。

このページの「Colors」を参考にすればよいです。

bulma.io

Font Awesomeのアイコンの指定方法

アイコンは、このページで探します。

fontawesome.com

この中の「Free」のアイコンで、使いたいものがあれば、アイコンをクリックして詳細画面をだします。

すると、詳細画面が開き、画面の左上のほうに以下のような情報がでてきます。

f:id:arakan_no_boku:20190525014015p:plain

上記なら、「fas fa-angry」と書かれています。
そこを見て。

  • packに「fas
  • iconに「angry」

を書けば、アイコンが表示されます。

注意点としては「fa-angry」と書かれている前の「fa-」をとって、iconのところに転記することです。

ここを「fa-angry」と書いてしまうと、表示されません。

 

参考:サンプルイメージ画面のソース

<templete>部分のみのvueファイルを作成して、それをindex.vueにリンクを追加して呼び出す形でやってみます。

pages/awesome.vue

<template>
  <div>
    <div class="container content has-text-centered">
      <NLink to="/">
        <p>ルートのページへ戻ります</p>
      </NLink>
    </div>
    <div class="tile is-ancestor">
      <div class="tile content is-parent is-vertical is-2" />
      <div class="tile content  is-parent is-vertical is-2">
        <article class="tile is-child box">
          <p class="title">
            Icon1
          </p>
          <div class="block">
            <b-icon pack="fas" icon="tachometer-alt" size="is-large" type="is-primary" />
            <span class="subtitle">速度計</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2">
        <article class="tile is-child  box">
          <p class="title">
            Icon2
          </p>
          <div class="block">
            <b-icon pack="fas" icon="tty" size="is-large" type="is-primary" />
            <span class="subtitle">電話</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2">
        <article class="tile is-child box">
          <p class="title">
            Icon3
          </p>
          <div class="block">
            <b-icon pack="fas" icon="angry" size="is-large" type="is-primary" />
            <span class="subtitle">怒り顔</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2">
        <article class="tile is-child box">
          <p class="title">
            Icon4
          </p>
          <div class="block">
            <b-icon pack="fas" icon="anchor" size="is-large" type="is-primary" />
            <span class="subtitle">イカリ</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2" />
    </div>
    <div class="tile is-ancestor">
      <div class="tile content is-parent is-vertical is-2" />
      <div class="tile content  is-parent is-vertical is-2">
        <article class="tile is-child box">
          <p class="title">
            Icon5
          </p>
          <div class="block">
            <b-icon pack="fas" icon="crow" size="is-large" type="is-primary" />
            <span class="subtitle">カラス</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2">
        <article class="tile is-child  box">
          <p class="title">
            Icon6
          </p>
          <div class="block">
            <b-icon pack="fas" icon="box-open" size="is-large" type="is-primary" />
            <span class="subtitle">開く箱</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2">
        <article class="tile is-child box">
          <p class="title">
            Icon7
          </p>
          <div class="block">
            <b-icon pack="fas" icon="chess" size="is-large" type="is-primary" />
            <span class="subtitle">チェス</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2">
        <article class="tile is-child box">
          <p class="title">
            Icon8
          </p>
          <div class="block">
            <b-icon pack="fas" icon="cloud" size="is-large" type="is-primary" />
            <span class="subtitle">クラウド</span>
          </div>
        </article>
      </div>
      <div class="tile content is-parent is-vertical is-2" />
    </div>
  </div>
</template>

次にこのページへのリンクを追加したindex.vueです。

page/index.vue

<template>
  <div>
    <div class="container content has-text-centered">
      <img src="~assets/00_nuxt.JPG" alt="image01">
    </div>
    <div class="container content has-text-centered">
      <NLink to="/about">
        <h3>{{ linkname1 }}</h3>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <NLink to="/cityapi">
        <h3>{{ linkname2 }}</h3>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <NLink to="/awesome">
        <h3>{{ linkname4 }}</h3>
      </NLink>
    </div>
    <div class="container content has-text-centered">
      <a :href="outurl">
        <h3>{{ linkname3 }}</h3>
      </a>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  head: {
    title: 'First page'
  },
  data () {
    return {
      outurl: 'https://ja.nuxtjs.org/',
      linkname4: '(内部リンク)WEBフォントサンプル',
      linkname3: '(外部リンク)v-bindのサンプル',
      linkname2: '(内部リンク)市区町村サンプル',
      linkname1: '(内部リンク)郵便番号サンプル'
    }
  },
  computed: {
    today () {
      return moment().format('YYYY/MM/DD dddd')
    }
  }
}
</script>

今回はこんなところで。

ではでは。