ウェブアイコン「Font Awesome」の使い方

author photo

Byinfobloger

ウェブアイコン

今回のテーマはウェブアイコン「Font Awesome」の使い方を紹介します。

今まで画像でしか表現できなかったアイコンなどを、画像ではなくテキストで表示してくれるサービスです。

このテンプレートでは既に「Font Awesome」を読み込む設定になっていますので、アイコンを選んで記事に挿入するだけで表示が可能になっております。

スポンサーリンク

基本的な「Font Awesome」の使い方

最初に「Font Awesome」にアクセスしてください。

Font Awesome

「Font Awesome」の使い方 fontAwesome01.jpg

  1. メニューからアイコンをクリックしてください
  2. アイコン一覧が表示されます
  3. 必要なアイコンをクリックしてください

簡単に「Font Awesome」を使う方法

赤枠で囲んだ所をコピーして貼り付けてください。

このままだと窮屈なので「fa-fw」を書き加えてアイコンと文字の間隔を少しあけます。

アイコンが小さい場合は簡単に大きくすることもできます。「fa-2x~fa-5x」

アイコンの色を変える場合はCSSに追記する必要があります。

アイコンを回転させるアニメーションも簡単です。「fa-spin」

CSSで「Font Awesome」をカスタマイズする方法

簡単にアイコンを表示する方法を紹介しましたが、細かい所はやはりCSSで調整する必要があります。
リストマークをアイコンに変える方法

  • このようにCSSでリストマークをアイコンに変えてみました
  • CSSでカスタマイズする時は赤枠の部分をコピーしてください
  • 基本的に無料で使えるアイコンは全て表示できます

HTML
<ul class="icon-check">
<li><!--ここに本文を記入--></li>
<li><!--ここに本文を記入--></li>
<li><!--ここに本文を記入--></li>
</ul>
CSS
ul.icon-check li{
    list-style: none;
}
ul.icon-check > li:before {
    content: "\f138";
    position: relative;
    font-family: FontAwesome;
    margin-right: .5em;
    color: #4682b4; /* 文字色 */
}

まとめ

このテンプレートを使用する場合は、色々なデザインに「Font Awesome」アイコンを使用しています。

CSSで調整が難しい場合は、直接アイコンを表示するようにしてください。

画像ではなくテキストとして認識されるので、ファイルサイズも小さくなります。

あまりにも多くの種類のアイコンが揃っていますので、検索の仕方をマスターして時短を心がけましょう。

以上「Font Awesome」の使い方でした。

関連記事
Share

Comments 0

Leave a reply