LoginSignup
15
14

More than 1 year has passed since last update.

CDN で手軽に Font Awesome を使う

Last updated at Posted at 2021-08-08

どこにでも書いてある簡単すぎる内容ですが、余計な情報を省いて、最短で 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>

こんな感じでアイコンが表示されます。
2021-08-09 012838.png

補足としての説明

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

次の1行で、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」から取得できます。
2021-08-09 013232.png

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

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

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

この HTML は、Font Awesomeのサイトに行って、取得します。
フリーのものを使うなら「Free Icons」(赤枠部分)をクリックします(2021年8月現在)。
2021-08-09 014159.png
表示されたアイコンから、必要なものを探し出しクリックます。
2021-08-09 014854.png
赤枠部分が必要な HTML です。クリックすればコピーで取得できます。
2021-08-09 015157.png
<参考サイト>
Font Awesome 5のアイコンをCDNとダウンロードデータでブラウザ表示する
Font Awesome 5は公式のCDNでCSS配布をやめるらしい

雑記

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

15
14
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
14