Font Awesomeを使ってみた！

2018年8月5日2019年12月22日ブログ

使用テーマ STINGER PLUS2

アイコンフォント『Font Awesome』というツールを使ってみました。

といってもアイコンフォントはプラグインなどで使っていたのですが、プラグインでは使えないアイコンもあります。なのでプラグインではなくツールを使ってみることにしました。

Font Awesomeとは

「アイコンフォントFontAwesomeなに?」と思う人もいると思います。

ネット上で上のようなアイコン見たことがあると思います。
Font Awesomeとはこのアイコンを文字として利用できるものです。
アイコンを文字として使えるのでCSSを使って大きくしたり、色を変えたりすることもできます。

Font Awesomeの使い方

FontAwesomeは『+サーバーから読み込んで表示』させるため、インストールなどは必要ありません。
FontAwesomeを使うには基本的にやることはふたつです。

• HEAD間にFontAwesomeを表示させるためのコードをコピーして貼り付ける
• 使いたいアイコンのコードをコピーして記事に貼る

基本的にはこれだけで使うことができます。

HEAD間に入れるコードは『Webフォント』、『SVG』の2種類あります。(どちらかを使います。)
私では違いがわかりませんので、導入方法で参考にさせてもらった記事のリンクを貼っておきますのでこちらを参考にしてください。

使い方は非常に簡単です。また、＜head＞～＜/head＞間に表示させるためのコードが入れられれば無料ブログなどでも使うことができます。
記事中に挿入する方法は使いたいアイコンを選択してコードをコピーして記事に貼り付けるだけです。

Font Awesomeを使ったリスト

いろんな人のサイトをみて、前々から「おしゃれなリストいいなぁ」と思っていました。
おしゃれなリストにはよくFont Awesomeが使われているので今回「やってみよう！」と思ったわけです(^^;)

そして、作ったのが▼これです。

私はHTMLやCSSは簡単なものしか知らないので、私がわかる範囲で作ってみました(^^;)

参考にした記事

私はWordPressのテーマは『Stinger Plus2』を使っています。
Stinger Plus2ではソーシャルボタンにFont Awesomeが使われています。(コードを入力すれば他のアイコンフォントも使えます。)

私はStinger Plusで使えることも知らず最新バージョンのFont Awesomeを導入しました。
すると…ソーシャルボタンのアイコンが表示されなくなってしまいました(^^;)

対処方法

Stinger Plusで使われているFont Awesomeは旧バージョンです。
なのでHEAD間に以下のコードを追加してください。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

これでソーシャルボタンのアイコンが表示されると思います。

最後に

WordPressのプラグインでFont Awesomeを簡単い使えるものがあります。
『Better Font Awesome』を使えば記事作成画面から呼び出すことができ、記事中にショートコードで貼り付けられます。
また、アイコンの大きさや色もCSSで変えることができます。

ただし、プラグインではCSSでのフォント指定ができません。
記事中に挿入するだけなら非常に便利なプラグインです。