Web blog WEBブログ

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

2018.05.25

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

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

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

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
詳細はGet started with Font Awesome参照

基本的な使い方

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

 
【Unicodeの例】

疑似要素と合わせる方法

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

 
【Unicodeの例】

まとめ

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

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

兼山暖美

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