SYNのブロックエディタには、アイコン挿入やアイコンブロックが用意されています。
しかし、SYNで用意しているアイコンではなく、Font Awesomeを利用したい場合もあるかもしれません。
Font Awesomeを利用する場合は以下のように設定してみてください。
CDNファイルを読み込む（Font Awesome 6系）
テーマ設定の<head>内の入力欄に、以下のCDN読み込みコードを入力します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">アイコンの基本的な使い方
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-brands fa-twitter"></i>上記のようなHTMLでFont Awesomeのアイコンを利用します。
実際に利用する際は、公式サイトから使いたいアイコンを選んで設定してください。
https://fontawesome.com/v6/search?q=free
サイズ・色・余白の調整
<i class="fa-solid fa-star fa-xs"></i>
<i class="fa-solid fa-star fa-sm"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star fa-lg"></i>
<i class="fa-solid fa-star fa-xl"></i>
<i class="fa-solid fa-star fa-2xl"></i>
<i class="fa-solid fa-star fa-2x"></i>
<i class="fa-solid fa-star fa-3x"></i>
<i class="fa-solid fa-star fa-5x"></i>fa-lg や fa-2x の指定でアイコンのサイズを調整可能です。
自分でクラスを設定して独自の調整をすることも出来ますので、CSSでお試しください。
.icon {
color: #333;
font-size: 24px;
margin-right: 8px;
}疑似要素で利用する場合
ボタンや見出しなどでアイコンを疑似要素で利用する場合は、以下のようなCSSを追加します。
.button::before {
content: "\f007";
font-family: "Font Awesome 6 Free";
font-weight: 900;
}よくあるエラーと対処法
- クラス名が違う（v5 / v6混在）
- Proアイコンを使っている
- CDN読み込みミス
- キャッシュ
バージョン違いの注意
v4 → fa fa-user
v5 → fas fa-user
v6 → fa-solid fa-user
上記のようにバージョンによってHTMLの書き方が異なるのでご注意ください。
Font Awesomeのサイトで利用したいアイコンのバージョンやプランの違いを確認してみましょう。
アニメーションを利用する
<i class="fa-solid fa-spinner fa-spin"></i>
<i class="fa-solid fa-spinner fa-spin-pulse"></i>
<i class="fa-solid fa-spinner fa-spin fa-spin-reverse"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-circle-info fa-fade"></i>
<i class="fa-solid fa-bell fa-beat-fade"></i>
<i class="fa-solid fa-arrow-down fa-bounce"></i>
<i class="fa-solid fa-bell fa-shake"></i>
<i class="fa-solid fa-sync fa-flip"></i>公式から色々なアニメーション用のクラスが用意されているので、動きを付けたい場合にお試しください。
| アニメーション | クラス | 表示例 | サンプルコード | 説明 |
|---|---|---|---|---|
| 回転 | fa-spin | 回転 | <i class=”fa-solid fa-spinner fa-spin”></i> | なめらかに回転（ローディングに最適） |
| 段階回転 | fa-spin-pulse | 回転 | <i class=”fa-solid fa-spinner fa-spin-pulse”></i> | カクカクした回転 |
| 逆回転 | fa-spin-reverse | 回転 | <i class=”fa-solid fa-spinner fa-spin fa-spin-reverse”></i> | 逆方向に回転 |
| 拍動 | fa-beat | 拍動 | <i class=”fa-solid fa-heart fa-beat”></i> | ドクンドクンと強弱 |
| フェード | fa-fade | フェード | <i class=”fa-solid fa-circle-info fa-fade”></i> | ふわっと点滅 |
| 拍動＋フェード | fa-beat-fade | 動き | <i class=”fa-solid fa-bell fa-beat-fade”></i> | 通知アイコンにおすすめ |
| バウンド | fa-bounce | バウンド | <i class=”fa-solid fa-arrow-down fa-bounce”></i> | 上下に跳ねる |
| シェイク | fa-shake | シェイク | <i class=”fa-solid fa-bell fa-shake”></i> | 左右にブルブル |
| フリップ | fa-flip | フリップ | <i class=”fa-solid fa-sync fa-flip”></i> | くるっと回転 |
