UIフレームワークの「Buefy」を使うと、モダンなアイコンセット「Font Awesome」を簡単に使えるようになります。
今回は、その使い方をやってみます。
この記事は「NUXT自己流チュートリアル（１）」として続き物で書いている記事の７回目です。
1回目から続けて読んでもらえることを想定して書いていますのでご了承ください。
今回の前提とかもろもろ
「Font Awesome」は、Freeで使えるものが約1500位あります。
もし、仕事で使うなら有償のPRO版がいいな・・と思うのですが、個人的な勉強のために使うくらいなら十分なボリュームです。
今時、アイコンを自作とかありえませんしね。
使い方に慣れておくに越したことはありません。
なお、今回の環境は以下の手順でインストールしたものを前提にしています。
また。
サンプルの画面は 「NUXT自己流チュートリアル（６）」で紹介した共通レイアウトを使って表示しています。
今回はこんな画面をつくってみます
アイコンのサンプルをタイルレイアウトで並べてみました。
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」の２つで指定します。
sizeは以下のうちから選びます。
- is-small
- is-medium
- is-large
typeで色目を決めます。
このページの「Colors」を参考にすればよいです。
Font Awesomeのアイコンを探す
このページで探します。
この中の「Free」のアイコンで、使いたいものがあれば、アイコンをクリックして詳細画面をだします。
すると、詳細画面が開き、画面の左上のほうに以下のような情報がでてきます。
上記なら、「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>
今回はこんなところで。
ではでは。