Nxut+CSSフレームワーク「Buefy」でアイコンセット「Font Awesome」を使う方法
目次
- はじめに
- Nuxt.jsを整理する方針
- アイコンセット「Font Awesome」
- Font Awesomeを使ったサンプル
- Nxut＋BuefyでFont Awesomeを使う方法
- 参考：サンプルイメージ画面のソース
はじめに
リライトして目次を追加しました。
内容は2019年5月当時のままです。
僕がNuxt.jsの各機能を理解するために、ひとつひとつ確認したことをまとめていこうと考えています。
インストール・環境構築は、以下の手順でできている前提です。
Nuxt.jsを整理する方針
Nuxt.js関連資料やサンプルソースを見ると混乱することが多いのは、Nuxt.jsはVue.jsの機能を包含していて、ひとつのソースの中で、どれがNuxt.js特有の機能で、どれがVue.jsの機能かの区別がつけにくいからだと感じています。
その混在しているイメージを図にしてみると、こんな感じに見えます。
なので、僕はアプローチとして、各技術要素にわけて、一回に少しずつ要素を確認していくことにしました。
分け方としては、以下のようになると考えています。
- Nuxt.js独自の要素ー基本
- Vue.js独自の要素
- BulmaのCSS要素（Burfyのclassは、Bulmaを使っている場合が多い）
- Buefy独自の要素
- Nuxt.js独自の要素ー応用
- テストフレームワーク他モジュールの要素
今回は、Nuxtアプリで体裁を整える部分にかかるのですが、上記リストには書いていないフォントについて取り上げます。
アイコンセット「Font Awesome」
「Font Awesome」は、Freeで使えるものが約1500位あります。
もし、仕事で使うなら有償のPRO版がいいな・・と思うのですが、個人的な勉強のために使うくらいなら十分なボリュームです。
なんで、「Font Awesome」を突然とりあげるかというと、UIフレームワークの「Buefy」と「Font Awesome」は相性がいいからです。
Font Awesomeを使ったサンプル
今回は、アイコンのサンプルをタイルレイアウトで並べてみます
枠の中に表示しているアイコンが「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」の２つで指定します。
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>
今回はこんなところで。
ではでは。
