AFFINGER

FontAwesomeの使い方【オシャレなアイコンを表示する】

2020-07-22

FontAwesome_アイキャッチ

こんにちは、レイです。

今回は、FontAwesomeで「WING(AFFINGER5)」をオシャレにする方法をご紹介します。

FontAwesomeはたった1行でオシャレなアイコンやアニメーションをどこにでも表示できる無料ツールキットです。
アフィンガーには「FontAwesome 4」が標準実装されているので設定も簡単です。
※アフィンガーでなくとも使い方は同じなので、他のテーマでも応用が効きます。

FontAwesomeの基本的な使い方としては、ヘッダーメニューにアイコンを表示する方法や外部リンクにアイコンをつけるなどがあります。



よく使うアイコンとコードも一覧にまとめましたので後で見返すときに役立ちます。
それではさっそく見ていきましょう。

この記事で分かること

  • FontAwesomeとは?
  • FontAwesomeの基本的な使い方
  • FontAwesomeでよく使うアイコン・コード一覧

FontAwesomeとは?

FontAwesome_トップページ

FontAwesomeは、無料で650以上アイコンが利用できる、オープンソースのウェブフォントです。フォントスクリプトを使用するウェブサイトの中では約4割のユーザーが使用しています。

AFFINGER5をはじめとするブログテーマにはFontAwesomeが最初から組み込まれているので、たった1行入れるだけでオシャレなWebアイコンを表示できます。

FontAwesomeの基本的な使い方

FontAwesome_アイコンサンプル

FontAwesomeの基本的な使い方を順を追って解説します。

環境は、ブログテーマ「AFFINGER5」、バージョンはアフィンガー推奨の「fontawesome v4.7.0」を使用します。この他のテーマやバージョンでもやり方は変わらないので応用できます。

では手順を解説します。

step
1
Font Awesomeへアクセス


FontAwesome_step1

こちらからアクセスできます。
>>Font Awesome Icons

step
2
アイコンを検索する


FontAwesome_step2

例として「ホームアイコン」を設置します。
検索窓に「home」と入力するとアイコンがでますので、選択します。

step
3
コードをコピー


FontAwesome_step3

出てきたコードをコピーして、メモ帳などに貼り付けます。※少しカスタマイズします。

step
4
コードをカスタマイズ


FontAwesome_step4

デフォルトだとサイズ感が小さいので、大きくします。「fa-lg」がサイズ指定です。

aria-hidden="true"はあってもなくてもよいですが、残しておいた方が無難。サンプルでは、コードを短くするため消してます。

この他のカスタマイズは、こちらのサンプルページが参考になります。
Font Awesome - Examples

step
5
コードを貼り付け


FontAwesome_step5

カスタマイズしたコードを表示したい箇所に貼り付けます。

今回はホームアイコンなので、外観⇒メニューからヘッダーメニュー(グローバルナビ)を選択して貼り付けています。
※記事内に貼り付けてもOKです。

外部リンクの例:

<a href="@外部リンクURL" target="_blank" rel="nofollow">@タイトル <i class="fa fa-external-link" aria-hidden="true"></i></a>

step
6
表示を確認する


FontAwesome_step6

適当なページを開いて、コードがアイコンになっているか確認しましょう。
上記のような感じになっていればOKです。

FontAwesomeでよく使うアイコン・コード一覧

ここでは、よく使いそうなアイコンたちをまとめています。
探すのが面倒な方向けです。

※必要に応じてサイズ調整してください。

名称 アイコン コード
ホーム <i class="fa fa-home" aria-hidden="true"></i>
ロケット <i class="fa fa-rocket" aria-hidden="true"></i>
歯車 <i class="fa fa-cog" aria-hidden="true"></i>
<i class="fa fa-cogs" aria-hidden="true"></i>
チャート <i class="fa fa-bar-chart" aria-hidden="true"></i>
<i class="fa fa-line-chart" aria-hidden="true"></i>
<i class="fa fa-pie-chart" aria-hidden="true"></i>
鉛筆 <i class="fa fa-pencil" aria-hidden="true"></i>
サイトマップ <i class="fa fa-sitemap" aria-hidden="true"></i>
検索 <i class="fa fa-search" aria-hidden="true"></i>
<i class="fa fa-search-plus" aria-hidden="true"></i>
内部リンク <i class="fa fa-link" aria-hidden="true"></i>
外部リンク <i class="fa fa-external-link" aria-hidden="true"></i>
Good <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
Bad <i class="fa fa-thumbs-o-down" aria-hidden="true"></i>
ハート <i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-heartbeat" aria-hidden="true"></i>
スター <i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-half-o" aria-hidden="true"></i>
電話 <i class="fa fa-phone" aria-hidden="true"></i>
<i class="fa fa-mobile" aria-hidden="true"></i>
ゴミ箱 <i class="fa fa-trash-o" aria-hidden="true"></i>
砂時計 <i class="fa fa-hourglass-half" aria-hidden="true"></i>
マウス <i class="fa fa-mouse-pointer" aria-hidden="true"></i>
繰り返す <i class="fa fa-repeat" aria-hidden="true"></i>
戻す <i class="fa fa-undo" aria-hidden="true"></i>
Facebook <i class="fa fa-facebook" aria-hidden="true"></i>
Twitter <i class="fa fa-twitter" aria-hidden="true"></i>
Instagram <i class="fa fa-instagram" aria-hidden="true"></i>
Pinterest <i class="fa fa-pinterest" aria-hidden="true"></i>
Rss <i class="fa fa-rss" aria-hidden="true"></i>
Share <i class="fa fa-share" aria-hidden="true"></i>
<i class="fa fa-share-alt" aria-hidden="true"></i>
Youtube <i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
Apple <i class="fa fa-apple" aria-hidden="true"></i>
Android <i class="fa fa-android" aria-hidden="true"></i>
Windows <i class="fa fa-windows" aria-hidden="true"></i>

まとめ:FontAwesomeでサイトをオシャレにデザインしよう

FontAwesomeでアイコンを表示するだけで、サイトがグッとオシャレになります。

同時にサイトの簡素なイメージをやわらげるも効果あり。

初心者でも簡単に導入できますので是非ご活用ください。

Font Awesome Icons
Font Awesome - Examples

関連記事AFFINGER5を使ってみた感想レビュー【他テーマとも比較】
関連記事Pinterestとは?登録方法・使い方・画像の作り方を全て解説

-AFFINGER
-

© 2021 ReiCodeBlog