AFFINGERでWebアイコン使いたいんだけど、いい方法ある？
AFFINGERなら公式のオリジナルアイコンが用意されてるから、それを使うと便利だよ！
WebアイコンにはFontAwesomeというサービスが有名です。
ただ、FontAwesomeは豊富なアイコンの種類があるので非常に便利なんですが、外部サイトから読み込むため多用するとサイトの表示スピードに影響するのがネックな点です。
そこで便利なのが、AFFINGERが公式で用意しているオリジナルアイコンです。
オリジナルアイコンならショートコードで簡単に使えるし、サイトスピードにも影響がほぼないのでおすすめです！
この記事では、AFFINGERで用意されているオリジナルアイコンの使い方を紹介します！
AFFINGER6を検討中の方
AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。
実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。
AFFINGER利用者は使わなきゃ損！
2023年7月をもってアクセス解析に便利なGoogleアナリティクスの仕様がGA4になりました。しかし、GA4は機能が凝りすぎてて使いこなすのがかなり難しい。そこでGA4に代わるオススメツールが『AFFINGERタグ管理マネージャー』です。シンプルで使いやすくアクセス解析も簡単にできます。AFFINGER利用者の特権なのでチェックしておきましょう。
＼当ブログ限定特典付き！／
【特大！全44ページ】AffiliateRun〜なぜ売れないか？がもらえる
AFFINGERのオリジナルアイコンを使う方法
アフィンガーのオリジナルアイコンってどうやって使うの？
アフィンガーのオリジナルアイコンの使い方は大きく2つあるよ！これからその方法を説明するね
アフィンガーのオリジナルアイコンの使い方は次の2つです。
- ショートコードで挿入
- ブロックにアイコンクラスつける
どちらもシンプルな方法なのでこの後の説明を読めば簡単にできるので、ぜひ使ってみてください！
ショートコードで挿入する方法
アフィンガーのオリジナルアイコンは次のショートコードを各所に記述すれば使えます。ショートコードは投稿ブロックやウィジェットで使えます。
（⇩カーソル合わせるとコピーできます）
[st-i class="クラス名" add_style="自由なCSS"]使い方はシンプルで
- クラス名→オリジナルアイコンのクラス名
- 自由なCSS→カラーコード、フォントサイズなど
これらを記述してあげましょう。オリジナルアイコンの「クラス名」は下のアイコン一覧を参照ください。
※ちなみに、ブロックエディターなら編集バーからでもアイコン用のショートコードを挿入できるので、クラス名を変えて使ってください。
ブロックにアイコンクラスをつける方法
アフィンガーの専用ブロックであれば、アイコンクラスを指定できるブロックがあります。
「アイコンクラス」が指定できるブロックは直接クラス名を記載するだけでOKです。
AFFINGER(アフィンガー)のオリジナル公式アイコン一覧
アフィンガーで用意されているオリジナルアイコンを表にまとめました。
| 名称 | アイコン | クラス名 | unicode |
| ペン | st-svg-pencil | f040 | |
| メモ | st-svg-file-text-o | f0f6 | |
| チェック | st-svg-check | f00c | |
| 注意 | st-svg-exclamation-circle | f06a | |
| （反転） | st-svg-exclamation-triangle | f071 | |
| リンク | st-svg-link | f0c1 | |
| はてな | st-svg-question-circle | f059 | |
| 虫めがね | st-svg-search | f002 | |
| 虫プラス | st-svg-search-plus | f00e | |
| 虫マイナス | st-svg-search-minus | f010 | |
| プラス | st-svg-plus-thin | e923 | |
| マイナス | st-svg-minus-thin | e922 | |
| ハート | st-svg-heart | f004 | |
| ユーザー | st-svg-user | f007 | |
| コメント | st-svg-comment | f075 | |
| 電球 | st-svg-lightbulb-o | f0eb | |
| （三角） | st-svg-lightbulb | e915 | |
| お知らせ | st-svg-bullhorn | f0a1 | |
| ダイヤ | st-svg-diamond | f219 | |
| 王冠 | st-svg-oukan | e908 | |
| 初心者 | st-svg-bigginer_l | e910 | |
| インフォ | st-svg-info-circle | f05a | |
| マル | st-svg-circle-o | f10c | |
| バツ | st-svg-times | f00d | |
| ニジュウマル | st-svg-circle-w | e920 | |
| サンカク | st-svg-triangle | e92b | |
| バー | st-svg-border | e91d | |
| Like | st-svg-thumbs-o-up | f087 | |
| （反転） | st-svg-thumbs-up | f164 | |
| Bad | st-svg-thumbs-o-down | f088 | |
| （反転） | st-svg-thumbs-down | f165 | |
| 指さし | st-svg-hand-o-right | f0a4 | |
| （反転） | st-svg-hand-right | e974 | |
| 時計 | st-svg-clock-o | f017 | |
| 表情（嬉） | st-svg-emotion-smile | e91b | |
| 表情（普） | st-svg-emotion-meh | e91a | |
| 表情（悲） | st-svg-emotion-frown | e919 | |
| 家（HOME） | st-svg-home | f015 | |
| 目 | st-svg-eye | f06e | |
| 目隠し | st-svg-eye-slash | f070 | |
| フォルダー | st-svg-folder | f07b | |
| （open） | st-svg-folder-open-o | f115 | |
| ピン | st-svg-thumb-tack | f08d | |
| コピー | st-svg-copy | f0c5 | |
| カメラ | st-svg-camera | f030 | |
| （レトロ） | st-svg-camera-retro | f080 | |
| ペン | st-svg-pencil-square-o | f044 | |
| クレジット | st-svg-credit-card-alt | f283 | |
| お金 | st-svg-money | f0d6 | |
| 外部リンク | st-svg-external-link | f08e | |
| カート | st-svg-shopping-cart | f217 | |
| マップ | st-svg-map-marker | f041 | |
| サインイン | st-svg-sign-in | f090 | |
| サインアウト | st-svg-sign-out | f08b | |
| 目次 | st-svg-toc | e91c | |
| ダウンロード | st-svg-cloud-download | f0ed | |
| ダウンロード | st-svg-download | f019 | |
| クリップ | st-svg-paperclip | f0c6 | |
| ロック | st-svg-lock | f023 | |
| （空き） | st-svg-unlock-alt | f13e | |
| PC | st-svg-desktop | f108 | |
| タブレット | st-svg-tablet | f10a | |
| モバイル | st-svg-mobile | f10b | |
| プリント | st-svg-print | f02f | |
| チャート | st-svg-line-chart | f201 | |
| 動画 | st-svg-youtube-play | f16a | |
| メール | st-svg-envelope-o | f003 | |
| （反転） | st-svg-envelope | f0e0 | |
| 写真 | st-svg-picture-o | f03e | |
| ギフト | st-svg-gift | f06b | |
| スター | st-svg-star | f005 | |
| （half） | st-svg-star-half-o | f123 | |
| （反転） | st-svg-star-o | f006 | |
| プラグ | st-svg-plug | f1e6 | |
| 本 | st-svg-book | f02d | |
| ブックマーク | st-svg-bookmark | f02e | |
| st-svg-pdf-o | f1c1 | ||
| ZIP | st-svg-file-zip-o | f1c6 | |
| code | st-svg-code | f121 | |
| ベル | st-svg-bell | f0f3 | |
| トロフィー | st-svg-trophy | f091 | |
| 魔法 | st-svg-magic | f0d0 | |
| タグ | st-svg-tag | f02b | |
| ショートコード | st-svg-shortcode | e99a | |
| 紙飛行機 | st-svg-paper-plane | f1d8 | |
| カレンダー | st-svg-calendar | f073 | |
| 写真 | st-svg-file-image-o | f1c5 | |
| フラッグ | st-svg-flag | f024 | |
| 箱 | st-svg-inbox | f01c | |
| 新聞 | st-svg-newspaper-o | f1ea | |
| P | st-svg-product-hunt | f288 | |
| パレット | st-svg-palette | e925 | |
| st-svg-instagram | f16d | ||
| st-svg-twitter | f099 | ||
| st-svg-google | f1a0 | ||
| st-svg-pinterest-p | f231 | ||
| amazon | st-svg-amazon | f270 | |
| wordpress | st-svg-wordpress | f19a | |
| double-up | st-svg-double-up | f102 | |
| double-down | st-svg-angle-double-down | f103 | |
| double-right | st-svg-angle-double-right | f101 | |
| angle-down | st-svg-angle-down | f107 | |
| angle-right | st-svg-angle-right | f105 | |
| angle-up | st-svg-angle-up | f106 | |
| caret-right | st-svg-caret-right | f0da | |
| arrow-circle-o-right | st-svg-arrow-circle-o-right | f18e | |
| arrow-circle-right | st-svg-arrow-circle-right | f0a9 | |
| arrow-right | st-svg-arrow-right | f061 | |
| chevron-down | st-svg-chevron-down | f078 | |
| chevron-right | st-svg-chevron-right | f054 | |
| arrow | st-svg-arrow | e900 |
AFFINGER6を検討中の方
AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。
実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。