Font AwesomeをCSSで表示させる方法【疑似要素を使用】

Font Awesome アイキャッチCSS
スポンサーリンク

今回はウェブサイトやブログでWebアイコンフォントを無料で表示できるFont AwesomeをCSSで表示させる方法を、備忘録も兼ねてブログにアウトプットしていきたいと思います。

今回の備忘録はこんな人におすすめ!
  • Font Awesomeを擬似要素で表示させたい!
  • Font Awesomeをテキストの前後につけたい
  • Font Awesomeの使い方についてもっと勉強したい!
UI
UI

Font AwesomeをCSSでも使えるようになると、デザインの幅が広がりますよね!

スポンサーリンク

まずは基本的なFont Awesomeの使い方をおさらいしましょう

忘れている人も多くいると思うので、まずは基本的なFont Awesomeの使い方についておさらいしましょう。

具体的な手順は、

  • CDNをheadタグ内に貼り付ける
  • 使いたいアイコンを探す
  • アイコンフォントのコードをコピー
  • アイコンを表示させたい位置に貼付ける

詳しく説明していきます。

CDNをheadタグ内に貼り付ける

以下のコードをコピーして、headタグ内に貼り付けてください

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

使いたいアイコンを探す

アイコン一覧から使いたいアイコンを探しましょう!iconページは何度も利用するのでブックマークしておくといいかもしれません。

検索もできますが、日本語では検索できないので注意しましょう!(英語で検索しましょう)

アイコンフォントのコードをコピー

アイコンフォントのコードをコピーしましょう。

アイコンを表示させたい位置に貼付ける

コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けましょう。これだけで以下のようにアイコンフォントを使うことができます。

アイコンが表示されているのがわかると思います。

Font AwesomeをCSSで使うには?

Font AwesomeをCSSで使うにはCSSの疑似要素(::before ::after)を使用します。Font AwesomeをCSSで表示させると、見出しなどのテキストにアイコンを表示させることができます。

実際の使用例を見てみる

実際に使ってみると以下のようになります。

詳しく説明していきます。

疑似要素でFont Awesomeを指定する。

まず、font-family: "Font Awesome 5 Free";でFontAwesomeを使うことを明示しています。
次に、content: '\f556'でアイコンの種類を指定します。

アイコンの種類のコードは上のところからコピーすることができます。

最後にfont-weightの指定なのですが、アイコンのタイプを指定することができます。

  • 400はRegularタイプ
  • 900はSolidタイプ

のアイコンを指定します。

まとめ

今回はFont Awesomeの基本的な使い方から、CSSの疑似要素を使用して表示する方法まで解説しました。Font Awesomeを使いこなせるようになるとデザインの幅が広がるので皆さんも良ければ使用してみてください。

コメント

タイトルとURLをコピーしました