CSS を決めるときに参考にしているサイト「サルワカくん」と Web アイコンフォント FontAwesome
どうも、かげさんです(^^)/
あなたがこの記事を読んでいるのは何回目でしょうか？
初めての方、いらっしゃい！
複数回目の方、再訪問ありがとです(・∀・)
まとめページとなるウェブページを作るにあたり、blockquote の CSS が気になり、今日はブログの CSS をいじっていました。
この記事では、CSS を決めるときに参考にしているサイトと Web アイコンフォント FontAwesome について書いていきます。
CSS 参考サイト：「サルワカくん」のサイト
かげさんが CSS を決めるときに参考にさせてもらっているサイトが「サルワカくん」のサイト「サルワカ | サルでも分かる図解説明マガジン」です。
具体的には、このブログで下記のページを利用させてもらっています。
画像でサンプルを載せると、こんな感じですね。
赤文字で書いたところが、該当します。
Webアイコンフォント FontAwesome
さて、上図で引用の白いダブルクォーテーションとカテゴリ名のタグのアイコンは、Webアイコンフォント FontAwesome を使用しています。
Webアイコンフォントは、Web上で使えるアイコン形式のフォントです。
文字フォントのように色を指定したり、サイズを指定したりできます。
画像アイコンと違い、拡大してもぼやけたりしないところが良いところです。
Font Awesome の存在は知っていたのですが、このブログには導入していなかったので、今回導入してみました。
Font Awesome の導入
実は、FontAwesome の導入もサルワカくんのサイトの「【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう」を参考にしていたのですが、うまくいかなくて調べながら導入しました。
先にかげさんがつまずいたところを説明していきます。
導入でよくわからなかったことが２つありました。
- HTML の head に入れるべきなのは、何なのか
- Font Awesome のアイコンが□（四角）になってしまう
1つ目で混乱したのは、おそらくサルワカくんのサイトの説明が2019年の記事で Font Awesome 5 なのに対して、現在 Font Awesome のサイトに行くと、2022年にリリースされた Font Awesome 6 のページが表示されるので、何が正しいのか分からなかったところ。
ネットで調べると Font Awesome 5 のサイトも多いので「書いてあることが違うんだけどｗ！」ってなってました(;^_^A
最終的には、Your Kit の内容を head タグの最後の方に入れれば良いことが分かりました。
続いて、Font Awesome のアイコンが□（四角）になってしまう問題は、こちらのページが参考になりました。
「FontAwesomeでアイコンが□（四角）になって表示されない場合の対策まとめ（:after:before利用時）」
このサイトには５つの原因が書かれていまして、かげさんは3つ目の「フォントの指定ができていない」のが原因でした。
CSS の font-family の指定をしていなかったのです。
Web アイコンフォントは、フォントだから font-family の指定
'Font Awesome 6 Free'
が必要だったみたい。
これを付けたら無事に表示されるようになりました。
使い方とか、導入手順は、後日まとめます。
ここまではOKだ
コメント
このブログの新着コメントをRSSリーダに登録する為のxml