Webアイコンフォント「Font Awesome」(Font Apocalypse)を使う

Web アイコンフォント

ウェブページ上で文字と同じように表示できるアイコンのことです。

画像でアイコンを貼るのと違い、拡大してもぼやけませんし、色もサイズも簡単に変えることができます。

【使い方】

①読み込み・・・以下のページのコードを読み込み

https://fontawesome.com/start

 

②アイコンを選ぶ

https://fontawesome.com/icons?d=gallery

 

③コードをコピー

・htmlなら<i class=”fas fa-〇〇〇〇”></i>を。

・cssの疑似要素で使うなら

.bomb:before {
  font-family: "Font Awesome 5 Free";
  content: '\f1e2'; ←これをコピペ
  font-weight: 900; ←必要(Regularタイプは400、Solidタイプなら900
}

 

【アニメーション効果その他の詳しい使い方はコチラを参考にしてみましょう】

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう