SimplicityでFont Awesomeを使ってみよう

FontAwesomeの使い方

Simplicityには、「Font Awesome」がデフォルトで使えるようになっています。

「Font Awesome」とは、手軽に使えるアイコンフォントのことで、たとえば手紙なら「」、電車なら「」など、サイト上に簡単にアイコンを表示することができます。

というわけで、今回はSimplicityで「Font Awesome」の使い方についてです。

画像名

この記事ではFont Awesomeのバージョン4.7.0の使い方を紹介しています。4.7.0の使い方はこちらをご覧下さい。

スポンサーリンク

メニューバーにFont Awesomeを表示してみる

上の画像のようにメニューバー(グローバルナビ)に「」を表示してみます。

1.Font Awesomeでアイコンを探す

まずは「Font Awesome」にアクセスして、使いたいアイコンを探します。

「Font Awesome」には、WEB上でよくみるアイコンが数百種類あります。使いたいアイコンがみつかったら、クリックしてみましょう。

今回は手紙マークを使いますので「」をクリックします。

すると、コードが出ますので、これをコピーします。

コピーできたら、Simplicityのダッシュボード画面から「外観」→「メニュー」へとすすみます。

2.Simplicityのメニュー設定

ここまできたら、あとは簡単です。

メニューから、アイコンをつけたい項目を開いて・・・

ナビゲーションラベルのところに、さきほどのコードを貼り付ければOKです。

今回は「contact」の前に入れたいので、コードも「contact」の前に貼ります。うしろにつけたい時は、うしろですね。

そして、確認してみると・・・

おお、「contact」の前にちゃんと入っています!

画像名

今回はアイコンをメニューバーに入れてみましたが、もちろん記事の本文にも使えます。入れたいところにコードを貼るだけでOKですよ!

まとめ

今回はSimplicityで「Font Awesome」の使い方でした。こんな簡単にアイコンを入れることができます。便利ですね!

手軽にWebアイコンフォントを使える「Font Awesome」が新しくなり、バージョン5となりました。 レイアウトだけでなく文字コー...
先日、「Amazon Price Tracker」というアドオンを知ったのですが、これ、すごく便利ですね。 Amazonの商品ページに...
スポンサーリンク