"BOKU"のITな日常

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

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

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

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

f:id:arakan_no_boku:20190509225706p:plain

 

今回の前提とかもろもろ

 

「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に以下を追記します。

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ファイルを作成してます。

<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> 
            <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"></b-icon>
                    <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"></b-icon>
                   <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"></b-icon>
                   <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"></b-icon>
                   <span class="subtitle">イカリ</span>
                   </div>
                </article>
            </div> 
            <div class="tile content is-parent is-vertical is-2"></div>    
        </div>    
        <div class="tile is-ancestor">
            <div class="tile content is-parent is-vertical is-2">
            </div>    
            <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"></b-icon>
                   <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"></b-icon>
                   <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"></b-icon>
                   <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"></b-icon>
                   <span class="subtitle">クラウド</span> 
                   </div>
                </article>
            </div>    
            <div class="tile content is-parent is-vertical is-2"></div>    
        </div>    
    </div>
</template>

こんな感じです。

ではでは。