Font Awesomeでよく利用されるアイコンを知りたい
Font Awesomeのアイコンはメニューに記事のワンポイント、リスト先頭のアイコンとして使うなど活用方法はイロイロあります。※こちらにFont Awesomeのアイコン検索方法についての記事があります。
無料で使えるアイコンは1000以上あり、全て見るのは大変なのでここではよく利用されるアイコンを紹介しています。
メニューに使えるアイコン
| アイコン |
名前 |
コード |
| |
fa fa-home |
<i class="fa fa-home"></i> |
| |
fas fa-search |
<i class="fas fa-search"></i> |
| |
fa fa-tag |
<i class="fa fa-tag"></i> |
| |
fa fa-cog |
<i class="fa fa-cog"></i> |
| |
fa fa-envelope |
<i class="fa fa-envelope"></i> |
| |
fa fa-sitemap |
<i class="fa fa-sitemap"></i> |
口コミ系に使えるアイコン
| アイコン |
名前 |
コード |
| |
fas fa-user |
<i class="fas fa-user"></i> |
| |
fa fa-users |
<i class="fa fa-users"></i> |
| |
fa fa-user-circle |
<i class="fa fa-user-circle "></i> |
|
fas fa-comments |
<i class="fas fa-comments"></i> |
|
far fa-comments |
<i class="far fa-comments"></i> |
| |
fas fa-comment-alt |
<i class="fas fa-comment-alt"></i> |
| |
fa fa-comment |
<i class="fa fa-comment"></i> |
| |
far fa-comment |
<i class="far fa-comment"></i> |
| |
fas fa-comment-dots |
<i class="fas fa-comment-dots"></i> |
| |
fa fa-thumbs-up |
<i class="fa fa-thumbs-up"></i> |
| |
fa fa-thumbs-o-up |
<i class="far fa-thumbs-up"></i> |
| |
fa fa-thumbs-down |
<i class="fa fa-thumbs-down"></i> |
| |
fa fa-thumbs-o-down |
<i class="far fa-thumbs-down"></i> |
PC,スマホ系アイコン
| アイコン |
名前 |
コード |
| |
fa fa-laptop |
<i class="fa fa-laptop"></i> |
| |
fa fa-phone |
<i class="fa fa-phone"></i> |
| |
fa fa-mobile |
<i class="fa fa-mobile"></i> |
| |
fa fa-tablet |
<i class="fa fa-tablet"></i> |
|
fas fa-copy |
<i class="fas fa-copy"></i> |
|
far fa-copy |
<i class="far fa-copy"></i> |
マーク系のアイコン
| アイコン |
名前 |
コード |
| |
fas fa-circle |
<i class="fas fa-circle"></i> |
| |
far fa-circle |
<i class="far fa-circle"></i> |
| |
fas fa-times |
<i class="fas fa-times"></i> |
| |
fas fa-check fa-fw |
<i class="fas fa-check"></i> |
| |
far fa-check-circle" |
<i class="far fa-check-circle"></i> |
|
fas fa-check-circle |
<i class="fas fa-check-circle"></i> |
| |
fas fa-check-square fa-fw |
<i class="fas fa-check-square"></i> |
| |
far fa-check-square |
<i class="far fa-check-square"></i> |
| |
fa fa-heart |
<i class="fa fa-heart"></i> |
| |
fa fa-heart-o |
<i class="far fa-heart"></i> |
| |
fa fa-star |
<i class="fa fa-star"></i> |
| |
fa fa-star-o |
<i class="far fa-star"></i> |
注意系のアイコン
| アイコン |
名前 |
コード |
| |
fa fa-exclamation |
<i class="fa fa-exclamation"></i> |
| |
fa fa-exclamation-circle |
<i class="fa fa-exclamation-circle"></i> |
| |
fa fa-exclamation-triangle |
<i class="fa fa-exclamation-triangle"></i> |
| |
fa fa-question |
<i class="fa fa-question"></i> |
| |
fa fa-question-circle |
<i class="fa fa-question-circle"></i> |
矢印系のアイコン
| アイコン |
名前 |
コード |
| |
fa fa-arrow-up |
<i class="fa fa-arrow-up"></i> |
| |
fa fa-arrow-right |
<i class="fa fa-arrow-right"></i> |
| |
fa fa-arrow-down |
<i class="fa fa-arrow-down"></i> |
| |
fa fa-arrow-left |
<i class="fa fa-arrow-left"></i> |
| |
fa fa-arrow-circle-up |
<i class="fa fa-arrow-circle-up"></i> |
| |
fa fa-arrow-circle-right |
<i class="fa fa-arrow-circle-right"></i> |
| |
fa fa-arrow-circle-down |
<i class="fa fa-arrow-circle-down"></i> |
| |
fa fa-arrow-circle-left |
<i class="fa fa-arrow-circle-left"></i> |
| |
far fa-arrow-alt-circle-up |
<i class="far fa-arrow-alt-circle-up"></i> |
| |
far fa-arrow-alt-circle-right |
<i class="far fa-arrow-alt-circle-right"></i> |
| |
far fa-arrow-alt-circle-down |
<i class="far fa-arrow-alt-circle-down"></i> |
| |
far fa-arrow-alt-circle-left |
<i class="far fa-arrow-alt-circle-left"></i> |
そのほかのアイコン
| アイコン |
名前 |
コード |
| |
fas fa-globe-asia |
<i class="fas fa-globe-asia"></i> |
| |
fas fas fa-crown |
<i class="fas fas fa-crown"></i> |
下記サイトではawesome 5.14 versionアイコンをジャンル毎にわけて紹介しているので便利な時もあります。
