CodingHaku｜プログラミング学習・開発Tips・技術情報

HTML、CSS、Javascript、PHPなどサイト制作についてのお役立ち記事を配信していきます。

Font Awesome アイコン 完全版

css カスタマイズ ブログ ボタン

Font Awesomeは、多くのWebサイトで使用されている人気のあるアイコンセットとCSSツールキットです。簡単にベクターアイコンを埋め込んで、サイズ、色、ドロップシャドウなどをCSSでカスタマイズできます。

Font Awesome の導入

Font Awesomeをプロジェクトに導入する方法は、CDNを使用するか、ファイルをダウンロードしてローカルに配置するかの2つがあります。

CDNを使用する方法

<head>タグの中に以下のリンクタグを追加して、Font AwesomeをCDNから読み込みます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl7/1B1ZsAd3JkD3IMoET19xrsKCRXWyvt7V/u6yp5" crossorigin="anonymous">

ダウンロードする方法（おすすめしない）

Font Awesomeの公式サイトからファイルをダウンロードし、プロジェクトフォルダに配置します。そして、以下のリンクタグを<head>タグの中に追加します。

<link rel="stylesheet" href="path/to/font-awesome/css/all.min.css">

アイコンの使用方法

Font Awesomeのアイコンを使用するには、<i>タグまたは<span>タグを使用し、適切なクラス名を指定します。

以下は、いくつかの例です。

<i class="fas fa-camera"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-heart"></i>

アイコンのカスタマイズ

CSSを使ってアイコンのサイズ、色、回転、ドロップシャドウなどをカスタマイズできます。

サイズの変更

i {
  font-size: 24px;
}

色の変更

i {
  color: red;
}

回転

i {
  transform: rotate(45deg);
}

ドロップシャドウの追加

i {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

Font Awesomeを使用することで、ウェブサイトのデザインに簡単に美しいアイコンを追加できます。公式ドキュメントで利用可能なアイコンやクラスを調べて、プロジェクトに応じてカスタマイズしてください。

スタックされたアイコン

Font Awesomeでは、アイコンを重ね合わせてカスタムデザインを作成することができます。この方法は、アイコンの組み合わせが無限大で、独自のデザインが可能です。

スタックされたアイコンを作成するには、<span>タグにfa-stackクラスを使用し、重ねるアイコンにfa-stack-1xやfa-stack-2xのクラスを使用します。

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>

アイコンのアニメーション

アイコンにアニメーションを適用することもできます。

アイコンを回転させるfa-spinや、ゆっくり回転させるfa-pulseなどのクラスを使うことで、動的なデザインが可能です。

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>

アイコンのサイズ変更

Font Awesomeアイコンは、ベクターグラフィックスであるため、簡単にサイズを変更できます。

fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-10x などのクラスを使って、アイコンのサイズを調整できます。

<i class="fas fa-star fa-xs"></i>
<i class="fas fa-star fa-sm"></i>
<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-3x"></i>

アイコンの色や透明度の変更

アイコンの色や透明度を変更することで、デザインのバリエーションが増えます。

CSSでアイコンの color や opacity プロパティを変更することで実現できます。

i.red {
  color: red;
}
i.semi-transparent {
  opacity: 0.5;
}
<i class="fas fa-star red"></i>
<i class="fas fa-star semi-transparent"></i>

アイコンのテキストとの組み合わせ

Font Awesomeアイコンは、テキストと組み合わせることができ、情報の伝達やデザインの向上に役立ちます。

例えば、ボタンの中にアイコンを配置したり、リンクテキストとアイコンを一緒に使うことができます。

<button class="btn">
  <i class="fas fa-download"></i> Download
</button>
<a href="#">
  <i class="fas fa-chevron-right"></i> Read More
</a>


Read More