Web blog WEBブログ

Webアイコンフォント『Font Awesome』の使い方(活用編)

2018.05.25

こんにちは。コーダーの兼山です。

今回は、Webアイコンフォント『Font Awesome』の活用編をご紹介します。
疑似要素beforeやafterを合わせて使用すると便利です。

HTMLファイルにコードを記述する

基本的な使い方

Font Awesome
URL:https://fontawesome.com/
 
上記サイト『icons』から使いたいアイコンを検索し、コードをコピーします。

 
【Unicodeの例】

疑似要素と合わせる方法

Font Awesome
URL:https://fontawesome.com/
 
上記サイト『icons』から使いたいアイコンを検索し、Unicodeをコピーします。

 
【Unicodeの例】

まとめ

注意事項としては、
① 度々、バージョンアップがある。
② 一部のアイコンには、 font-weight: bold; を指定しないと表示されないようです。

Font Awesomeを活用できれば、メンテナス等、簡単にできるので便利です。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア