FontAwesomeで利用できる形態について調べてみた(Unicode、Glyph、SVG)

Font Awesome のアイコンフォントを利用した時、コピーできる形式に「SVG」というのがあります。

聞いたことないなぁ~と思っていたら、時代遅れもいいところ…。これから主流になっていく「かも」しれない画像形式のようです。

Webサイトで利用する画像といえばJPEGかPNGと思ってました。

このことに気づいたのをきっかけに、FontAwesomのコピー形式選択画面を眺めると、かなりテキトーに使ってたことが判明!

違いを整理すると、SVGのことも理解できてきました。

Font Awesome で利用できる内容の整理

Font Awesome でアイコンのコードを貰う画面には、4個のボタンが並んでいます。

つまり、4つの利用形態を選ぶことができます。

その4形態を個別にみていくと、次のようになります。

  1. ユニコードをコピーできます。
  2. Glyph(グリフ)がコピーできます。
  3. SVGコードのコピーができます。
  4. SVGファイルのダウンロードができます。

それぞれを何に使うのかをみていきましょう。

Copy Unicode(ユニコード)

Unicodeは文字コードの業界規格のひとつです。
世界中の様々な言語の文字を収録して通し番号を割り当ててあります。

Font Awesome のアイコンも、ひとつひとつにUnicodeが割り振られています。

CSSのbeforeafterなどの疑似要素でアイコンフォントを指定する場合、contentプロパティの値にUnicodeを指定します。

新住所:東京都千代田区〇町〇丁目

.sample1::before{
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   font-size: 24px;
   content: "\f015";
}

Copy Glyph(グリフ)

フォント用語としての『グリフ』は、「字体」「見た目」を指す英語です。

Font Awesome では、アイコンフォントをDTP用(Desktop Publishing)にダウンロードできます。

「DTP(ディーティーピー)というのは、

PC上で印刷物のデータを制作することです。

ダウンロードしたフォントをインストールすると、「Illustrator」「Photoshop」などの画像ソフトはもちろん、「Word」「Excel」などでも使えるようになります。

問題は、ひとつひとつのアイコンフォントがどの文字コードに割り当てられているかがわからないことです。

そこで「2」のCopy Glyphを使います。

Font Awesome のアイコン画面で「Glyph」をコピーし、実際の作業画面に貼り付けてみてください。

貼り付け直後は「ナニコレ…」という物体に見えますが、フォントの種類をFont Awesomeに変更すれば、アイコンの形で表示されるはずです。

あとは通常のフォントを扱うのと同様に、サイズや色を変えることができます。

Glyphを使う前にFontAwesomeのダウンロード&インストールが必要です

Copy SVG code & Download SVG file

この記事の本題でもあるSVG。まずはWikiをみてみました。

Scalable Vector Graphics

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形)は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。

出典: フリー百科事典『ウィキペディア(Wikipedia)』

要約すると『きれいに拡大・縮小できちゃう ベクター形式 の画像』ですね。

Scalable = Scale(スケール) + able(できる) ⇒ 縮尺できる

もうひとつ加えると、SVGはXML(Extensible Markup Language)というマークアップ言語で構成されるものなので、HTML文書の一部として使用できるという特徴があります。

XMLとHTMLという言葉が似ているので混乱しますが、この二つは別のものです。

どちらもコンピューターに文章の組み立てを伝えるためのマークアップ言語ですが、HTMLはWebページの記述に使われます。XMLは異なる情報システム間でデータの共有や管理を行いやすくするために使われます。

HTMLが既に決められたタグを使うのに対し、XMLのほうはタグを自由に設定できるという自由度の高さが特徴です。

XMLはデータ共有が目的のため、記述形式がシンプルで分かりやすいのも特徴のひとつです。

SVGはXMLをベースとしたアイコンなので、これまでのWebフォントに比べて拡大・縮小が自在で、拡張性が高いアイコンです。できることも品質的にも、今までよりレベルアップしています。

以上のような特徴を持ったSVGファイル形式の Font Awesome を利用できるようになっているのが「3」「4」のボタンです。

Copy SVG code

  • HTML内で使うためのコードをコピーできます。

Download SVG file

  • SVG形式の画像ファイルとしてダウンロードします。
  • SVGファイルは、SVG形式を扱えるソフトで利用&編集が可能です。
    (対応ソフトの中で有名なものでは、Illustratorがあります。)

WordPressでSVGファイルを使う

WordPressでは、現在のところSVGは未対応です。どうやらセキュリティに問題があるようです。

今後の対応状況には注目していきたいですね。

どうしても使いたいという場合は、下のようなプラグインで対応します。

まとめ

今回は、Font Awesomeで利用できる形態について調べてみました。

Copy Unicode
CSSで使うユニコードをコピーできます。
Copy Glyph
DTP用のGlyph(グリフ)がコピーできます。
Copy SVG code
HTMLで利用するSVGコードのコピーができます。
Download SVG file
SVG形式の画像ファイルをダウンロードできます。

タイトルとURLをコピーしました