polo-web.com/WP
Font Awesome のアイコンを使う｜create-block

Font Awesome のアイコンを使う｜create-block

create-block

Font Awesomeを自分のサイトにダウンロードして、以下に説明するSVG + JSを使用してプロジェクトにアイコンを取り込むことができる。

ブロック名：/Local-Polo/icon-display

簡単にcreate-blockデフォルトの状態で頭にアイコンを入れてみる。

create-blockでFont Awesome のアイコンを実際に使うにはどうしたら良いか。
ダウンローして、そのファイルをプラグインの中に入れるという工程になる。

svgファイルを直接入れる方法。
しかし、Font Awesome のアイコンは以下のような一般的な方法では表示されない。

<img src="your_svg_file.svg" alt="SVG画像" width="200" height="100">
<object data="your_svg_file.svg" type="image/svg+xml" width="200" height="100"></object>
svg id="logomark" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
  <polygon id="logomark-polyline" fill-rule="evenodd" clip-rule="evenodd" fill="#0CB9C7" points="128.25,26 147.19,96.69 95.44,148.44 24.75,129.5 5.81,58.81 57.56,7.06 "/>
</svg>
<object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>

正式の方法で使うことにする。

目次

SVG + JS ファイルを使う方法

公式説明サイト：https://docs.fontawesome.com/web/setup/host-yourself/svg-js

ダウンロード先：https://fontawesome.com/download

SVG + JSで設定する

Font Awesome Downloadまたはパッケージの中には、必要なファイルがまとめて入っている。
/jsフォルダには、Font Awesomeのすべてのファミリー（Classic、Sharp、Brands）のコアスタイル、ユーティリティ、アイコン、およびスタイルオプション（Solid、Regular、Light、Duotone、およびThin）が含まれている。

ブロックにダウンロードした Font Awesome ファイルを配置する

ダウンロードしたフォルダ名をfontawesomeと変更してsrc/icon-display/icon/fontawesomeのように作成する。この配置は別にどこでも良い。最終的にパスが通れば問題なし。
そして最初のテストでは全てのファイルをそのまま入れてやったが、最終的には使うファイルだけを入れれば良いことになる。

サイトにフォルダを作成して、その中に以下のファイルを入れる。

  • /js/fontawesome.js
  • 必要なスタイルのjsファイル（ここでは/js/brands.jsと/js/solid.jsを入れてみる）

最低でもコアファイル/js/fontawesome.jsと、使用したい個々のスタイルのJSファイルを必ず含めること。
無料で使えるのはbrandsとsolidと説明にはあるがregularも使えた。

プロジェクトでFont Awesomeを参照

create-blockの場合、edit.jsで以下のようにまずファイルをリンクする必要がある。
最後はfontawesome.jsとなるのだが、ここでは.jsはいらない。

import './icon/fontawesome/js/solid';
import './icon/fontawesome/js/brands';
import './icon/fontawesome/js/fontawesome';

最後にfontawesome.jsローダーを参照することをお勧めするとのことなので一番下に記述した。
パスがファイルを配置した場所を正しく指していることを確認！

以下のようにedit.jsに入れる。４行目に入っているのがアイコン表示のためのスクリプトになる。

export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			<i class="fa-solid fa-user"></i>
			{ __( 'Icon Display – ハロー editor!', 'icon-display' ) }
		</p>
	);
}

<i class=”fa-solid fa-user”>この中でuserがsvgsフォルダの中にあるファイルuser.svgの名前になる。

最終的なedit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

import './editor.scss';
import './icon/fontawesome/js/fontawesome';
import './icon/fontawesome/js/solid';

export default function Edit() {
	return (
		<p { ...useBlockProps() }>
			<i class="fa-solid fa-user"></i>
			{ __( 'Icon Display – ハロー editor!', 'icon-display' ) }
		</p>
	);
}

このようにうまく入った。

入れる位置はどこでも良い <i class=”fa-solid fa-user”> を入れるだけである。

カラーとサイズの設定

以下の公式サイトで説明されているのですぐわかる。

説明サイト：https://docs.fontawesome.com/web/style/basics

<span style="font-size: 3em; color: Tomato;">
  <i class="fa-solid fa-camera"></i>
</span>

<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fa-solid fa-camera"></i>
</span>

<span style="font-size: 3rem;">
  <span style="color: Mediumslateblue;">
    <i class="fa-solid fa-camera"></i>
  </span>
</span>

こんな方法もある。fa-6xがフォントサイズになる数値が大きくなるほどアイコンが大きくなる。

<i class="fa-solid fa-baby-carriage fa-6x" style="color: tomato"></i>

この他、以下のところでサイズやカラーのHTMLを確認することもできる。