Font-awesomeの仕様が変わっていて焦った話 #HTML

はじめに

普段アイコンを使うときはSVGかGoogleFontを利用することが多いのですが、スクールの質問で反映されないという相談があり久しぶりに触りました。

表示されない原因でよくあるのが
　1.CDNがアイコンのコードとバージョンが合ってない
　2.before:、after:の疑似要素に使用
　3.PRO版(有料)のアイコンを使っている
　4.CSSのfont系の設定が間違っている

今回はHTML/CSSとシンプルなサイトだったので①に特定し解決策を探してみました。

問題①昨年まで使えていたlinkタグが使えなくなった

Font-awesomeの説明で最もわかりやすいのがサルワカさんのこちらの記事ですが、方法1に掲載されたこちらのコードを使ってもアイコンが表示されなくなりました。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

これは現在サイトにアクセスして表示されるアイコンのコードとバージョンが合ってない事が原因です。

解決法①アイコンのコードを編集する

twitterのこちらのアイコンのコードを例に説明します。

<i class="fa-brands fa-twitter-square fa-2x"></i>

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
  <i class="fa-brands fa-twitter-square fa-2x"></i>
</body>
</html>

この状態ではアイコンは表示されません。
そこで次のように書き換えます。

<i class="fab fa-twitter-square fa-2x"></i>

アイコンが表示されました。
こちらのコードは5.xバージョンの時のコードなのでキチンと表示する事が出来ます。
これでも良いのですが、アイコンを利用する度に書き換えるのは生産性が良くないので次の手を考えます。

解決策②Font-awesomeに登録してscriptタグを取得して貼り付ける

こちらも簡単です。
公式サイトにアクセスして会員登録するとKitCodeというものが取得できます。

登録の流れ
1.公式サイトへアクセスし、Start For Freeをクリック

2.メールアドレスを入力してSend Kit Codeをクリック

3.返信されたメールのClick to〜をクリックして表示された項目を入力

4.ログイン後Copy Kit Codeをクリックしてコードをコピー

こちらはscriptタグなのでbodyタグの閉じタグの前に貼り付けます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <i class="fa-brands fa-twitter-square fa-2x"></i>
  <script src="https://kit.fontawesome.com/4c71fc8fc7.js" crossorigin="anonymous"></script>
</body>
</html>

無事に表示されました。
しかし会員登録すら面倒だと思ったので、別の方法を見つけました。

解決策③Font-AwesomeのGitHubからlinkタグをコピぺ

※こちらの記事を参考にさせていただきました。

Font-AwesomeのGitHubにアクセスします。
今回は最新版を使用するのでバージョンは表示されたままにします。
1番上のリンクを使用するので < / > をクリックしてコピーします。

headタグ内に貼り付けます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <i class="fa-brands fa-twitter-square fa-2x"></i>
</body>
</html>

表示されました。
Font-awesomeのGithubのリンクまで辿り着くのに時間はかかりましたが、個人的にはこちらの方法だと古いバージョンにも対応できるので良いなと感じました。