飛人のメディア工房

これから自分や会社のWEBサイトやメディアを作ってみよう!というブログです。

Font Awesomeの使い方メモ 2019/8(はてな本文とか見出し表示とか)

自分のブログやサイトにアイコンフォントを使えるFont Awesome。

<<<こういうの

登録時やはてなブログへの設定時に悩んだので、メモしときます。

・はてなブログ本文に「Font Awesome」が入れられない場合

・「Kit's Code」だと、「Font Awesome」の見出し(h2,h3など)が表示されない場合

Font Awesomeの登録方法と使い方

はてなブログに「Font Awesome」を設定する

はてなブログに「Font Awesome」を設定する手順は以下の通り

「Font Awesome」にアクセス

Font Awesome

1.「Free」(無料)でスタートのボタンを選ぶ

 

2.メールアドレスを登録する

 

3.届いたメールのリンクを開く

 

4.パスワードを設定する

 

5.「Kit Code」が発行されるので、コピペする

はてなブログのダッシュボードに行く

1.>>設定

 

2.>>詳細設定

 

3.>>headに要素を追加

 

ここに「Kit's Code」をコピペします。

以上ではてなブログに「Font Awesome」を設定できました。

はてなブログで「Font Awesome」を使う

「Font Awesome」のサイトにアクセス

Font Awesome

「icons」をクリック

>>「Free」をクリック

>>「home」などのキーワードでアイコンを検索する

   or 左のカテゴリーにチェックを入れると、絞り込むことができます。

 

使いたいアイコンを選んで「Start Using This icons」をクリック

 

アイコンのHTMLをコピーする

これで準備完了。

ナビゲーションメニューに「Font Awesome」を使う場合

ダッシュボード >>デザイン

 

>>カスタマイズ >>ヘッダ

 

>>タイトル下

ここに、ナビゲーションメニュー(グローバルメニュー)のHTMLを書き込む。

例:

 メニュー文の前に、アイコンのHTMLを挿入しますが「スペース」を入れるとバランスが良くなります。

「URL」の部分は、メニューに合わせて変更します。

このブログの場合は

  • HOME=「トップページ」へのリンク
  • ABOUT=「はじめに」記事へのリンク
  • 専門ブログ=「専門ブログ作り」カテゴリへのリンク
  • ワードプレス=「ワードプレス」カテゴリへのリンク
  • ツール=「ツール」カテゴリへのリンク
  • CONTACT=ツイッターへのリンク

にしてみました。

※適宜変更していきます。

ブログ本文に「Font Awesome」を使う場合

はてなブログの本文に「Font Awesome」を使う場合には、注意が必要です。

「Font Awesome」のアイコンHTMLを本文にそのまま貼り付けても

はてなブログの仕様によりHTMLが消えてしまいます。

 

スペースを表すHTML(    など)をアイコンHTMLに挿入すると

 

別のHTMLに書き換えられますが、一応回避できます。

「サルワカ」さんの記事が参考になりました。ありがとうございました!

saruwakakun.com

Font AwesomeのCDNを利用した設定方法

CDNはContent Delivery Networkの略。

コンテンツ(この場合アイコンフォント)を届けるネットワークです。

アイコンフォント本体はサーバーにあるので、ブラウザーがサーバーから読み取って表示します。

linkタグを使う

上記のコードをヘッダーに貼ります。

※バージョンを最新に更新する必要があります。

※見出しのカスタマイズで「Font AwesomeのUnicode」を使っている場合、この方法が良いようです。

このサイトでは、2019/8現在併用しています。

古いバージョンを使いたい(Ver.4)場合

「BootstrapCDN」の「Font Awesome」のページに行ってCSSをコピペ

www.bootstrapcdn.com

コピペしたCSSを加工してサイトのヘッダーに貼る。

ちなみにこんなコード

以上で完了です。

古いアイコンなら使えるので、私の別サイトはこれで使ってます~。