Sampleを見る
Font Awesomeとは？
Font AwesomはWebサイトにアイコンフォントを簡単に表示させることができるWebサービスです。 提供されているアイコンフォントは商用利用可能です。また、名前にフォントとあるようにフォント同様にサイズ・色変更をCSSで調整することができます。
使い方は簡単で、以下のCDNを使って読み込むだけです。
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>以下のように「fax-xxxx」で始まるクラスがアイコンのデザインを指定している部分です。
class="fas fa-save"
faの後ろの1文字には以下の意味があります。
- fas:(Font Awesome Solid): 塗りつぶされたアイコンです。太くてしっかりしたデザインが特徴で、シルエットがはっきりしています。ボタンの中で使用してもはっきり認識できます。
- far :(Font Awesome Regular): アウトラインのみのデザインが特徴です。Solidアイコンに比べて軽やかで、シンプルなデザインです。テキストの中で使用しても悪目立ちしません。
- fab`:(Font Awesome Brands): ブランドやロゴのアイコンです。企業やサービスのロゴを表現するために特化されています。
アイコンの使い方
Font Awesomeのアイコンは、<i>タグや<span>タグで使用します。クラス名にはアイコンのスタイルと名前を指定します。
以下にいくつかの例を示します。
<!-- solidアイコン -->
<i class="fas fa-camera"></i> カメラアイコン
<!-- レギュラーアイコン -->
<i class="far fa-paper-plane"></i> 紙飛行機アイコン
<!-- ブランドアイコン -->
<i class="fab fa-github"></i> GitHubアイコンサイズの変更
アイコンのサイズはクラスで指定できます。fa-xsからfa-10xまであります。
<i class="fas fa-camera fa-2x"></i> <!-- 2倍のサイズ -->
<i class="fas fa-camera fa-5x"></i> <!-- 5倍のサイズ -->色の変更
CSSを使ってアイコンの色を変更できます。
<i class="fas fa-camera" style="color: red;"></i> <!-- 赤色のカメラアイコン -->回転や反転
アイコンを回転させたり、反転させたりすることもできます。
<i class="fas fa-camera fa-spin"></i> <!-- 回転 -->
<i class="fas fa-camera fa-flip-horizontal"></i> <!-- 水平方向に反転 -->
<i class="fas fa-camera fa-flip-vertical"></i> <!-- 垂直方向に反転 -->以下はサンプルのソースコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>font-awesome-icons-with-buttons.html</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- Font Awesome -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="container my-4">
<a href="https://fontawesome.com/search"
>これらはほんの一部です。リンクには3万以上（含む有料）のアイコンがあります。</a
>
<div class="row">
<div class="col-sm-4 my-1">
<button class="btn btn-primary w-100">
<i class="fas fa-save"></i> 保存
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-secondary w-100">
<i class="fas fa-download"></i> ダウンロード
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-success w-100">
<i class="fas fa-upload"></i> アップロード
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-danger w-100">
<i class="fas fa-trash"></i> 削除
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-warning w-100">
<i class="fas fa-edit"></i> 編集
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-info w-100">
<i class="fas fa-search"></i> 検索
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-dark w-100">
<i class="fas fa-envelope"></i> メッセージ
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-light w-100">
<i class="fas fa-check"></i> 承認
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-primary w-100">
<i class="fas fa-times"></i> キャンセル
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-secondary w-100">
<i class="fas fa-plus"></i> 追加
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-primary w-100">
<i class="fas fa-sync fa-spin"></i> 更新
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-secondary w-100">
<i class="fas fa-exclamation-triangle"></i> 警告
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-success w-100">
<i class="fas fa-info-circle"></i> 情報
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-danger w-100">
<i class="fas fa-ban"></i> 禁止
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-warning w-100">
<i class="fas fa-undo"></i> 戻る
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-info w-100">
<i class="fas fa-redo fa-spin"></i> 進む
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-dark w-100">
<i class="fas fa-home"></i> ホーム
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-light w-100">
<i class="fas fa-print"></i> 印刷
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-primary w-100">
<i class="fas fa-question-circle"></i> ヘルプ
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-secondary w-100">
<i class="fas fa-lock"></i> ロック
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-primary w-100">
<i class="fas fa-sign-out-alt"></i> ログアウト
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-secondary w-100">
<i class="fas fa-user-plus"></i> ユーザー追加
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-success w-100">
<i class="fas fa-users"></i> ユーザー一覧
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-danger w-100">
<i class="fas fa-user-times"></i> ユーザー削除
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-warning w-100">
<i class="fas fa-user-edit"></i> ユーザー編集
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-info w-100">
<i class="fas fa-cog"></i> 設定
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-dark w-100">
<i class="fas fa-chart-bar"></i> 統計
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-light w-100">
<i class="fas fa-camera"></i> 写真撮影
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-primary w-100">
<i class="fas fa-video"></i> ビデオ撮影
</button>
</div>
<div class="col-sm-4 my-1">
<button class="btn btn-secondary w-100">
<i class="fas fa-music"></i> 音楽再生
</button>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
これらはほんの一部です。リンクには1600以上のフォントがあります。
上記の例ではWebアプリケーションでよく使われるアイコンを30個ご紹介しています。また、アイコンをBootStrap5のボタンと組み合わせています。さらに、グリッドシステムを利用して、各ボタンを整列させています。これにより、レスポンシブなデザインになり、画面サイズに応じてレイアウトが自動的に調整されます。各ボタンはそれぞれ col-* クラスを含む div タグ内に配置されています。
col-sm-4 を使用して、スモール（sm）サイズ以上のデバイスでは各行に3つのボタンが表示されるようにしています。また、my-1 というクラスを追加してY軸方向（上下）にマージンを追加し、ボタン間に少しスペースを作っています。そして、w-100 クラスを使用してボタンが親の div タグ全体を使用するようにしています。