ホームページのアイコンに最適なFontawesomeの使い方

CDN

fontawesomeはCDNで提供されているため、リンクをコピペするだけですぐに利用することができます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

HTMLでfontawesomeを利用する場合

サイズの指定はfa-2xなどと設定し、2倍のサイズなら2x、3倍のサイズなら3xと指定します。

<i class="fas fa-envelope-square fa-2x">

:after擬似要素

CSSのafter疑似要素で設定する場合は、font-sizeをrem指定で行います。

.example:after {
    font-family: "Font Awesome 5 Free";
    content: "\f0a9";
    font-weight: 900;
    font-size: 2rem;
    color:#DF0000;
}

よく使うアイコン

以下のアイコンは私が比較的よく使用するアイコンをまとめたものです。

• 
  f199
• 
  f0a9
• 
  f07a
• 
  f0d8
• 
  f0e0
• 
  f015
• 
  f100
• 
  f101
• 
  f102
• 
  f103
• 
  f104
• 
  f105
• 
  f106
• 
  f107
• 
  f0c9
• 
  f002