便利なフリーアイコン: Font Awesome を導入。

f:id:mikanusagi:20180513030635p:plain

アイコンがたくさん。。導入も簡単°˖✧f:id:mikanusagi:20180513030741p:plain       

 

こんにちは。今日は、このブログでも使わせて頂いている、

フリーのWebアイコン、「Font Awesome」についての備忘録です。 

(有料版もあるけど、無料版だけでも2018年5月の時点で、

 1,000種類以上のアイコンが使用可能。)

 

 

 

データをパソコンにダウンロードして云々かんぬん…というのは苦手なので、

今回はWeb経由で使える方法をやります。CDNを使う方法です。

公式ページでも最も使いやすい方法って書いてある (笑)。

f:id:mikanusagi:20180514191622p:plain

 

1.コードをhead要素に追加。

私が今使っているのは、下記、version5.0.6です。

これをheadタグのところにコピペしています。

 

本日、2018年5月14日時点では、version 5.0.13が最新版。 

最新版はGet Startedの画面で確認できます。  Get Started | Font Awesome

 f:id:mikanusagi:20180514191710p:plain

 下記のコードになっていました。(2018/5/14現在)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

 

古いコードでも使えますが、新しいフォントに対応していないこともあるので、

必要なら、時々バージョンを確認した方がいいかもしれません。

Font Awesome 4と、5は、指示系統が少し違うので、versionが完全に違う場合は、

古いのも残しておいた方がいいのかな? いつか試してみなくちゃ。。(´_ゝ`)

 

はてなブログの場合は、設定 > 詳細設定 > で、

「headに要素を追加」、のとこにコピペ。これで準備OK。

f:id:mikanusagi:20180514193927p:plain

 

私が使ってるのは、integrityとcrossoriginがないんだけどいいのかな…?

(どこからコピペしてきたから。。よく分からない。。)

これなくても見た目は同じになるみたいです。

f:id:mikanusagi:20180514194923p:plain

この短いバージョンで使っていいのかわからないのですが、、わかったら追記します。

 

 

2.画像のコードをコピーする。

試しにHTMLで、バスを指定してみます。

Iconsを指定して、「bus」 と入力すると…

f:id:mikanusagi:20180514202347p:plain

バスのアイコンがでてきました。

グレーのやつは、有料版なので、私は使うことが出来ません。

 

バスの画像を選択して… 

f:id:mikanusagi:20180514202756p:plain

左下に出てくる <i class=...> をコピーします。

(右側にあるファイルみたいな絵をクリックすると、コピーできます。)

 

 

3. HTMLやCSSに貼り付ける。これで完成。

今回はHTMLでやってみます。さっきコピーしたコードを貼り付け。

f:id:mikanusagi:20180514194626p:plain

 すると、プレビュー画面で、このように表示。

f:id:mikanusagi:20180514203658p:plain

 

なお、はてなブログの場合は、HTMLでFont Awesomeを使う場合、

<i ....> </i> の間に何か文字をいれておかないと、この指示は無効になっちゃいます*1

また、自動的に i が em に切り替わっちゃいますが…まあ気にしない。(´_ゝ`)

f:id:mikanusagi:20180514203823p:plain(*´Д`) あれ?

 

 

応用編:

How to Useにいろいろアレンジの仕方が書いてあります。

その中からいくつかピックアップ。

画像の大きさを変える。

f:id:mikanusagi:20180514205042p:plain

0.75倍から10倍まで指示だせます。 上の画像はこんな感じ…。

<i class="fas fa-camera-retro fa-xs"> </i>
<i class="fas fa-camera-retro fa-sm"> </i>
<i class="fas fa-camera-retro fa-lg"> </i>
<i class="fas fa-camera-retro fa-2x"> </i>
<i class="fas fa-camera-retro fa-3x"> </i>
<i class="fas fa-camera-retro fa-5x"> </i>
<i class="fas fa-camera-retro fa-7x"> </i>
<i class="fas fa-camera-retro fa-10x"> </i>

 

fa-xsは0.75倍、fa-smは0.875倍、fa-lgは1.33倍、fa-2x~10xは2倍~10倍。 

 

 

画像の幅を固定する。 

画像の横幅をそろえるというか…。  fa-fw 追加でできます。

分かりやすいように背景に色つけてます。

【指定あり:fa-fw あり】

   

 

【指定なし fa-fw なし】

   

上のは、画像の占める横幅が統一されてます。

リストなどで、縦の位置を統一したい時に便利みたいです。 

指定ありの方はこんな感じ。

<i class="fas fa-home fa-fw" style="background:orange"> </i>
<i class="fas fa-info fa-fw" style="background:orange"> </i>

 

 

画像を回転させる。 

fa-spin を追加すると回転する。

回転できるアイコンは、、現時点ではコチラ→Icons | Font Awesome

  

 

その他いくつか…

fa-rotate-90:90度回転。数字をかえれば、180度、270度もいける。

     

 

fa-inverse:色を反転。

 

 

アイコンを重ねる。

その1:

fa-stack-1x が通常サイズ。例えば色を反転させる。

fa-stack-2xが大きいサイズ。

で、これを重ねる。

   

 

<span class="fa-stack fa-3x">
<i class="fas fa-square fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span>

 

その2:

fa-stack-2xの方の色を変えてみる。トマト色に…。

   

諸事情でちょっとずれてるけど、本来はずれないはず…?

</span>
<span class="fa-stack fa-3x">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span> 

 

他にもいろいろできるみたいです。

詳しくは How to Use | Font Awesome コチラ。。(*´Д`)←力尽きた。

 

 

最後に。 

簡単に導入できるし、アレンジもできるし、種類は豊富だし。

ということで、せっかくなので、使いこなせるよう、頑張ります。

では、今回はこのへんで。(*'▽')/

 

 

 

 

追記

 

*1:タグの間を「&nbsp;」で挟むと、実際の表示では文字は出ないけど、きちんとアイコンが表示されるようになります。

はてなのHTML編集に自動的に表示される、ピンクの点 (下図) をコピペして、

HTML編集の時に貼り付けても同じ挙動です。

f:id:mikanusagi:20180517045232p:plain

実際こんな感じになります。

<HTML編集> (fa-timesは、バツ印のアイコン)    

 f:id:mikanusagi:20180517045719p:plain

<プレビュー画面 (実際の表示)>

 f:id:mikanusagi:20180517045859p:plain