CDN で手軽に Font Awesome を使う

4078 ワード
HTML cdn FontAwesome HTML テキストリンク

どこにでも書いてある簡単すぎる内容ですが、余計な情報を省いて、最短で Font Awesome を使えるようにメモとして書いておきます。

サンプルコード

次のように書けば、どんなフレームワークでも関係なく Font Awesome が使えます。

sample.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <title>test</title>
</head>
<body>
  <i class="fas fa-thumbs-up"></i>
</html>

こんな感じでアイコンが表示されます。

補足としての説明

css ファイルを読み込む URI を取得する

次の１行で、Font Awesome を表示する css ファイルを読み込んでいます。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

この css ファイルの URI は「font-awesome - Libraries」から取得できます。

使用するアイコンの HTML を取得する

次の１行でアイコンを表示しています。

<i class="fas fa-thumbs-up"></i>

この HTML は、Font Awesomeのサイトに行って、取得します。
フリーのものを使うなら「Free Icons」（赤枠部分）をクリックします（2021年8月現在）。

表示されたアイコンから、必要なものを探し出しクリックます。

赤枠部分が必要な HTML です。クリックすればコピーで取得できます。

＜参考サイト＞
Font Awesome 5のアイコンをCDNとダウンロードデータでブラウザ表示する
Font Awesome 5は公式のCDNでCSS配布をやめるらしい

雑記

現在は、Spring Boot という WEB フレームワークを使っていますが、ダウンロードしてライブラリ（MVN Repository Font Awesome）を入れるのは面倒なのでパスしました。必要に迫られたときに調べれば良いかと思います。