ライブドアブログで「Font Awesome」によるアイコンフォントを表示する方法【HTML・CSS】

ブログ

こんにちは。

今回は、ライブドアブログでFont Awesomeによるアイコンフォントを表示する方法についてまとめていきたいと思います。

当ブログでも使用している、こちらの箇条書きリスト(ul)を試しに作っていきます。

bandicam 2020-02-15 16-04-30-949

スポンサーリンク

アイコンフォントとは?Font Awesomeとは?

アイコンフォントとは、文字として利用できるアイコン素材のことです。
Font Awesomeは、そのアイコンフォントを取り扱っているサイトです。

↓こんなやつです

これらは文字として扱うことができるので、大きさを変えたり…

色を変えたりすることができます。

また、色々なブランドのアイコンも用意されています。Twitterのアイコンもあります。

またりん ← クリックしてみてください。ブログのTwitterに飛びます。

このように、とても簡単にアイコンを扱うことができます。

HTMLから直接アイコンフォントを表示する

まずは、HTMLから直接アイコンフォントを表示してみます。

ライブドアブログの記事編集画面に直接入力することでアイコンフォントを表示します。

HTMLのheadタグにコードを入力

1, ライブドアブログの設定 > デザイン / ブログパーツ設定 > PC を選択します。

bandicam 2020-02-15 16-39-51-415

2, カスタマイズから、それぞれのHTMLファイルの<head></head>内に以下のコードを入力します。

bandicam 2020-02-15 16-40-09-772

これを入力↓

最新バージョンは、Font Awesomeの公式サイトから確認して、数字を適宜書き換えてください。

bandicam 2020-02-15 16-59-04-163

これで、Font Awesomeを利用することができるようになりました。

記事編集画面にアイコンフォントのコードを貼る

Font Awesomeの公式サイトから使いたいアイコンを検索します。

1, 上のメニューからIconsを選び、好きなアイコンを探す。

bandicam 2020-02-15 17-05-00-123

2, アイコン個別ページのコードをコピーする。
左クリックするだけでコピーできます。

bandicam 2020-02-15 17-05-44-393

3, 記事の編集画面に貼り付ける。

こんな感じで表示されます。

<i class=”fas fa-comments”></i>

大きさを変えたい場合は、

<i class=”fas fa-comments fa-2x”></i>
<i class=”fas fa-comments fa-3x”></i>

色を変えたい場合はCSSと組み合わせて、

<i class=”fas fa-comments icon-red”></i>

<i class=”fas fa-comments icon-blue”></i>

これをCSSに入力↓

という感じです。

こちらのサイトを参考にしました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

スポンサーリンク



CSSを使ってアイコンフォントを表示する

先ほどの箇条書きリストを作っていきます。

bandicam 2020-02-15 16-04-30-949

事前に、HTMLのheadタグにコードを入力 を終わらせておいてください。

先ほどと同様にカスタマイズ画面からCSSを編集します。

bandicam 2020-02-15 17-29-47-069

今回はこのようなコードを追加しました。

私の場合、記事本文では「.article-body h2 { … }」のように先頭に「.article-body」とついていたので、これに従いました。

テーマによってクラス名が違うこともあるので、適宜変更してください。

14行目は font-family を指定しています。
無料版は “Font Awesome 5 Free” 、PRO版は “Font Awesome 5 Pro” となるようですね。

15行目の content は、アイコンフォントのコードを示しています。
アイコンフォントの個別ページに書いてあります。

bandicam 2020-02-15 17-42-33-000

16行目の font-weight は必須項目です。
これを入力しないと、アイコンフォントが表示されない!という問題が発生します。

アイコンフォントの個別ページにstyleが書いてあります。
これによって数値を決めます。

bandicam 2020-02-15 17-44-34-418

スタイル
SOLID900
REGULAR400
LIGHT300
BRANDS400

無料版だと、SOLIDとBRANDSしか使わないと思うので、これだけ気をつけておきましょう。

というわけで、これを利用してulでリストを作ると下のようになります。

  • こんな
  • 感じ
  • です

(ライブドアブログの仕様上スマホから見るとただのリストになってしまいますが…)

こちらのサイトをとても参考にしました。
さらにカスタマイズしたい方はこのサイトをぜひ読んでみてください。

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

スポンサーリンク



まとめ

以上、ライブドアブログで「Font Awesome」によるアイコンフォントを表示する方法でした。

Font Awesomeのアイコンフォントはとても便利なので、どんどん使っていきましょう!

コメント

タイトルとURLをコピーしました