Parts & Tips

Phosphor Iconsを利用する

Phosphor Iconsを利用する方法について解説しています。

「Phosphor Icons」は「Font Awesome」に代表されるアイコンフォントサービスのひとつです。ライセンスはMITライセンスで、個人・商用とも無償で利用可能です。
本記事ではWebサイトで利用する方法を紹介していますが、他にFigma用のライブラリなども提供されています。

CSSファイルを読み込む ​

CSSファイルを読み込んで利用します。<head></head>内、もしくはCSSファイル内に直接記述します。CSSファイル内に記述する場合は、最初の方に記述してください。

html
<!-- <head></head>内に記述する場合 -->
<head>
  <link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css">
</head>
css
/* CSSファイル内に記述する場合 */
@import url('https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css');

Phosphor Iconsにはスタイルがいくつか用意されており、利用するスタイルごとにCSSファイルを読み込みます。

txt
@regular（通常）
https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css

@thin（一番細いラインのもの）
https://unpkg.com/@phosphor-icons/web@2.1.1/src/thin/style.css

@light（regularとthinの間の細さのラインのもの）
https://unpkg.com/@phosphor-icons/web@2.1.1/src/light/style.css

@bold（太めのラインのもの）
https://unpkg.com/@phosphor-icons/web@2.1.1/src/bold/style.css

@fill（regularに塗りが足されたもの）
https://unpkg.com/@phosphor-icons/web@2.1.1/src/fill/style.css

@duotone（regularに薄い塗りが足されて2色になったもの） ※fillともすこしちがう
https://unpkg.com/@phosphor-icons/web@2.1.1/src/duotone/style.css

補足①

全スタイルを網羅したJavaScriptのコードも用意されていますが、読み込み速度に影響がありおすすめしないため、ここでは記載していません。
公式ドキュメントの「Using All Weights」の項目にも記載があるので、そちらもご確認ください。

補足②

URLの/web@2.1.1の部分は現在のバージョンのため、今後変更になる可能性があります。記事執筆時点（25/3/9）での提供バージョンは2.1.1です。

アイコンを選んでHTMLでマークアップする ​

Phosphor Iconsのサイトで使用するアイコンを探します。日本語には対応していないので、英単語で検索をします。

アイコンの見た目や大きさ、色味などはすべてサイト上で確認できます。

Phosphor Iconsのサイトキャプチャ

アイコンをクリックすると画面下側にポップアップが表示されるので、「Web」のタブを選んで表示されるHTMLのコードをコピペします。

補足

ポップアップ左側、アイコンの下の「SVG」をクリックすると、アイコンをダウンロードできます。「»」をクリックすると、PNG画像に切り替えできます。

見た目をCSSで調整する ​

アイコンフォントの見た目をCSSで調整します。以下は一例です。

html
<p><i class="ph ph-chat-circle-dots"></i>チャットアイコン</p>
css
i.ph {
  margin-right: 5px;
  font-size: 20px;
  position: relative;
  top: 4px;
}

表示例

Phosphor Iconsの表示例

ざっくりコード解説 ​

html
<p><i class="ph ph-chat-circle-dots"></i>チャットアイコン</p>

<i class="ph ph-chat-circle-dots"></i>の部分がコピーしたHTMLのコードです。利用するアイコンのスタイルによって、最初のclass名であるphの部分がph-boldやph-fillになったりします。ph-chat-circle-dotsの部分はどのスタイルでも固定です。

css
i.ph {
  margin-right: 5px;
  font-size: 20px;
  position: relative;
  top: 4px;
}

i.phの部分も、利用するアイコンのスタイルによってi.ph-boldやi.ph-fillに適宜変更してください。
アイコン「フォント」なので、アイコンの大きさの指定はfont-sizeで指定します。アイコンの横にテキストを入れているので、margin-rightで余白を指定しています。
そのままだとアイコンの位置がテキストよりすこし上擦ってしまうので、position: relative;とtop: 4px;で位置を調整しています（位置調整はこれ以外にも方法がありますが、あくまで一例として）

なお、Phosphor Iconsのサイトではiタグでコピーされますが、class名が同じであればspanタグでも問題ありません。

以上です。

< Back to Home