Font Awesome Version: 5.1.0をCDNで利用し、cssの疑似要素で表現する方法

5233 ワード
フロントエンド CSS font FontAwesome CSS テキストリンク

こんにちは、missyです。

今回はタイトルどおり、
1. Font Awesome Version: 5.1.0をCDNで引っ張ってくる
2. CSSでFont Awesomeのアイコンを出す
これらについてカンタンに解説していきますーー！！

Font Awesome Version: 5.1.0をCDNで引っ張ってくる

まずは本家サイトから以下のようなCDNのlinkタグをコピーします。
※ 有料版と無料版に分かれています。今回は無料版(FREE)を使います。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

これをペッとHEADタグ内に貼り付けてください。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
  </head>

これで下準備はOKです。

ちなみにサンプルのhtmlはこちら

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <main>
      <section>
        <h1>テスト</h1>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
      </section>
    </main>
  </body>
</html>

CSSでFont Awesomeのアイコンを出す

style.css
@charset "UTF-8";

li:after{
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f579";
}

ポイントは3つ。
- font-familyの指定をしっかりとしてあげる。(Version 5以降、"Font Awesome 5 Free"という指定に変わったようです。)
- font-weightもお忘れなく！(選んだアイコンによって数値が変わります。bold, normalでもOK!)
- ユニコードにはバックスラッシュ()もお忘れなく！(例: "\f579")

以上です。

結果

上記方法でそのままブラウザに表示させると以下のように出現すると思います。