More than 5 years have passed since last update.

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

Posted at 2018-11-19

こんにちは、missyです。

今回はタイトルどおり、

Font Awesome Version: 5.1.0をCDNで引っ張ってくる
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")

以上です。

結果

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up