Font Awesome5の日本語検索と画像変換ツール

Pocket

Font Awesome5の日本語検索とアイコンSVGをダウンロードできるツールを作成しました。

FontAwesome5日本語検索ツール

できること

FontAwesome5 無料版のアイコンを全て使用できます。
アイコンフォントを日本語検索できます。
アイコンフォントのサイズや色、アニメーション、テキストなどのカスタマイズが可能です。
アイコンフォントをSVG、PNGに変換しダウンロードできます。

上記ツールを紹介する前にFont Awesome5について簡単に解説します。

FontAwesomeとは

FontAwesome5

アイコンフォントを使用してブログやWEBサイトにテキストと同じようにアイコンを表示するサービスです。無料版で1,500種類以上、有料版だと5,000種類以上のアイコンが使用できます。

アイコンフォントはアイコン画像を簡単な記述で表示することができます。スタイルを指定することでサイズや色の変更が可能で、サイズを大きくしてもアイコン画像が荒くなりません。

FontAwesome5の使い方

CDNとJavascriptで読み込み方法がありますが、CDNで読み込むほうが簡単です。

１．以下のタグをheadタグ内にコピペします。

<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">

２．表示するアイコンを探して選択します。

３．コードをコピーして、ブログやWEBサイトで表示したい箇所に貼り付けます。

<i class="fas fa-long-arrow-alt-right"></i>

上記コードを貼り付けます。

以上がFontAwesomeのざっくりとした使い方です。

詳細な使い方を知りたい方は以下のサイトで詳しく説明しています。参考にしてください。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

FontAwesome5日本語検索・SVGツールの使い方

作成したFontAwesome5日本語検索・SVGツールの使い方について解説します。

FontAwesome5ツールは現在大きく分けると以下の２種類の機能があります。

タグ生成：iタグを生成し、CSSでアイコンフォントを表示するツール
画像変換：SVG・PNG画像に変換し、画像をダウンロードできるツール

「タグ生成」機能の操作方法

１．使用するフォントを日本語で検索（クラス名、unicodeでも検索可能です）

ここではキーワードに「矢印」と入力してみました。矢印アイコンが一覧に表示されます。

２．アイコンフォントのコードを選択します。

コピーしたコードをブログやWEBサイトで表示する箇所に貼り付けてください。

※リストについて

青枠欄はカスタマイズした際のアイコンフォントイメージが表示されます。

赤枠欄はアイコンフォントの情報が表示されます。

上から

1.「アイコンイメージ」

2.「アイコンの日本語名」

3.「タグに指定するクラス名」

4.「疑似要素を指定する際のUnicode」

となります。

「タグ生成」機能のカスタマイズ

１．「CDN・カスタマイズ」ボタンをクリックします。

２．ボタンの下にFontAwesome5のCDNとカスタマイズ欄が表示されます。

CDN：2019/07/19時点の最新のCDNが表示されます。headタグにコピペしてください。
サイズ：0.75倍から10倍までのサイズが選択可能です。
回転・反転：90度、180度、270度、水平反転、垂直反転が選択できます。
カラー：カラーパレットから選択可能です。
アニメーション：ボタンを選択すると該当するアニメーションが設定されます。
幅を統一する：複数のアイコンを設定した場合、アイコンの幅が統一されます。
テキスト挿入、テキスト位置：選択したテキスト位置に入力したテキストが表示されます。

「カスタマイズ後のイメージ」

「画像変換」機能の操作方法

１．タグ生成と同じように使用するフォントを日本語で検索します

２．ダウンロードする画像形式を「SVG」「PNG」より選択してください

以下のダイアログが表示され画像のダウンロードが可能になります。

「SVG」をクリックした場合

「PNG」をクリックした場合

「画像変換」機能のカスタマイズ

１．「カスタマイズ」ボタンをクリックすると以下のようにカスタマイズが可能になります。

サイズ：0.75倍から10倍までのサイズが選択可能です。
回転・反転：90度、180度、270度、水平反転、垂直反転が選択できます。
カラー：カラーパレットから選択可能です。
幅を統一する：複数のアイコンを設定した場合、アイコンの幅が統一されます。
別のアイコンを背面に表示：ボタンに表示されているアイコンをクリックするか、テキスト欄にクラス名を直接指定すると表示中のアイコンの背面に指定したアイコンが表示されます。

「カスタマイズ後のイメージ」