"BOKU"のITな日常

還暦越えの文系システムエンジニアの”BOKU”は新しいことが大好きです。

Nxut+Buefyでアイコンセット「Font Awesome」を簡単に使う/NUXT自己流チュートリアル(1)-7

UIフレームワークの「Buefy」を使うと、モダンなアイコンセット「Font Awesome」を簡単に使えるようになります。

今回は、その使い方をやってみます。

f:id:arakan_no_boku:20190509225706p:plain

この記事は「NUXT自己流チュートリアル(1)」として続き物で書いている記事の7回目です。

1回目から続けて読んでもらえることを想定して書いていますのでご了承ください。

arakan-pgm-ai.hatenablog.com

 

今回の前提とかもろもろ

 

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

fontawesome.com

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

今時、アイコンを自作とかありえませんしね。

使い方に慣れておくに越したことはありません。

なお、今回の環境は以下の手順でインストールしたものを前提にしています。

arakan-pgm-ai.hatenablog.com

また。

サンプルの画面は 「NUXT自己流チュートリアル(6)」で紹介した共通レイアウトを使って表示しています。

arakan-pgm-ai.hatenablog.com

 

今回はこんな画面をつくってみます

 

アイコンのサンプルをタイルレイアウトで並べてみました。

f:id:arakan_no_boku:20190525012146p:plain

 

Nxut+BuefyでFont Awesomeを使う方法

 

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

 

nuxt.config.jsの設定

 

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>タグの使い方

 

指定の仕方の例です。

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

今回はこんなところで。

ではでは。