広告 AFFINGER

【FontAwesome不要】AFFINGER6のアイコン一覧と使い方

6月 10, 2023

【FontAwesome不要】AFFINGER6のアイコン一覧と使い方

AFFINGERでWebアイコン使いたいんだけど、いい方法ある？

AFFINGERなら公式のオリジナルアイコンが用意されてるから、それを使うと便利だよ！

ゆう

WebアイコンにはFontAwesomeというサービスが有名です。

ただ、FontAwesomeは豊富なアイコンの種類があるので非常に便利なんですが、外部サイトから読み込むため多用するとサイトの表示スピードに影響するのがネックな点です。

そこで便利なのが、AFFINGERが公式で用意しているオリジナルアイコンです。

オリジナルアイコンならショートコードで簡単に使えるし、サイトスピードにも影響がほぼないのでおすすめです！

この記事では、AFFINGERで用意されているオリジナルアイコンの使い方を紹介します！

AFFINGER6を検討中の方

AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。

実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。

AFFINGER利用者は使わなきゃ損！

2023年7月をもってアクセス解析に便利なGoogleアナリティクスの仕様がGA4になりました。しかし、GA4は機能が凝りすぎてて使いこなすのがかなり難しい。そこでGA4に代わるオススメツールが『AFFINGERタグ管理マネージャー』です。シンプルで使いやすくアクセス解析も簡単にできます。AFFINGER利用者の特権なのでチェックしておきましょう。

＼当ブログ限定特典付き！／

AFFINGERタグ管理マネージャー4をチェック

【特大！全44ページ】AffiliateRun〜なぜ売れないか？がもらえる

AFFINGERのオリジナルアイコンを使う方法

アフィンガーのオリジナルアイコンってどうやって使うの？

アフィンガーのオリジナルアイコンの使い方は大きく2つあるよ！これからその方法を説明するね

ゆう

アフィンガーのオリジナルアイコンの使い方は次の2つです。

  • ショートコードで挿入
  • ブロックにアイコンクラスつける

どちらもシンプルな方法なのでこの後の説明を読めば簡単にできるので、ぜひ使ってみてください！

ショートコードで挿入する方法

アフィンガーのオリジナルアイコンは次のショートコードを各所に記述すれば使えます。ショートコードは投稿ブロックやウィジェットで使えます。

（⇩カーソル合わせるとコピーできます）

[st-i class="クラス名" add_style="自由なCSS"]

使い方はシンプルで

  • クラス名→オリジナルアイコンのクラス名
  • 自由なCSS→カラーコード、フォントサイズなど

これらを記述してあげましょう。オリジナルアイコンの「クラス名」は下のアイコン一覧を参照ください。

※ちなみに、ブロックエディターなら編集バーからでもアイコン用のショートコードを挿入できるので、クラス名を変えて使ってください。

ブロックにアイコンクラスをつける方法

アフィンガーの専用ブロックであれば、アイコンクラスを指定できるブロックがあります。

「アイコンクラス」が指定できるブロックは直接クラス名を記載するだけでOKです。

AFFINGER(アフィンガー)のオリジナル公式アイコン一覧

アフィンガーで用意されているオリジナルアイコンを表にまとめました。

名称アイコンクラス名unicode
ペンst-svg-pencilf040
メモst-svg-file-text-of0f6
チェックst-svg-checkf00c
注意st-svg-exclamation-circlef06a
（反転）st-svg-exclamation-trianglef071
リンクst-svg-linkf0c1
はてなst-svg-question-circlef059
虫めがねst-svg-searchf002
虫プラスst-svg-search-plusf00e
虫マイナスst-svg-search-minusf010
プラスst-svg-plus-thine923
マイナスst-svg-minus-thine922
ハートst-svg-heartf004
ユーザーst-svg-userf007
コメントst-svg-commentf075
電球st-svg-lightbulb-of0eb
（三角）st-svg-lightbulbe915
お知らせst-svg-bullhornf0a1
ダイヤst-svg-diamondf219
王冠st-svg-oukane908
初心者st-svg-bigginer_le910
インフォst-svg-info-circlef05a
マルst-svg-circle-of10c
バツst-svg-timesf00d
ニジュウマルst-svg-circle-we920
サンカクst-svg-trianglee92b
バーst-svg-bordere91d
Likest-svg-thumbs-o-upf087
（反転）st-svg-thumbs-upf164
Badst-svg-thumbs-o-downf088
（反転）st-svg-thumbs-downf165
指さしst-svg-hand-o-rightf0a4
（反転）st-svg-hand-righte974
時計st-svg-clock-of017
表情（嬉）st-svg-emotion-smilee91b
表情（普）st-svg-emotion-mehe91a
表情（悲）st-svg-emotion-frowne919
家（HOME）st-svg-homef015
目st-svg-eyef06e
目隠しst-svg-eye-slashf070
フォルダーst-svg-folderf07b
（open）st-svg-folder-open-of115
ピンst-svg-thumb-tackf08d
コピーst-svg-copyf0c5
カメラst-svg-cameraf030
（レトロ）st-svg-camera-retrof080
ペンst-svg-pencil-square-of044
クレジットst-svg-credit-card-altf283
お金st-svg-moneyf0d6
外部リンクst-svg-external-linkf08e
カートst-svg-shopping-cartf217
マップst-svg-map-markerf041
サインインst-svg-sign-inf090
サインアウトst-svg-sign-outf08b
目次st-svg-toce91c
ダウンロードst-svg-cloud-downloadf0ed
ダウンロードst-svg-downloadf019
クリップst-svg-paperclipf0c6
ロックst-svg-lockf023
（空き）st-svg-unlock-altf13e
PCst-svg-desktopf108
タブレットst-svg-tabletf10a
モバイルst-svg-mobilef10b
プリントst-svg-printf02f
チャートst-svg-line-chartf201
動画st-svg-youtube-playf16a
メールst-svg-envelope-of003
（反転）st-svg-envelopef0e0
写真st-svg-picture-of03e
ギフトst-svg-giftf06b
スターst-svg-starf005
（half）st-svg-star-half-of123
（反転）st-svg-star-of006
プラグst-svg-plugf1e6
本st-svg-bookf02d
ブックマークst-svg-bookmarkf02e
PDFst-svg-pdf-of1c1
ZIPst-svg-file-zip-of1c6
codest-svg-codef121
ベルst-svg-bellf0f3
トロフィーst-svg-trophyf091
魔法st-svg-magicf0d0
タグst-svg-tagf02b
ショートコードst-svg-shortcodee99a
紙飛行機st-svg-paper-planef1d8
カレンダーst-svg-calendarf073
写真st-svg-file-image-of1c5
フラッグst-svg-flagf024
箱st-svg-inboxf01c
新聞st-svg-newspaper-of1ea
Pst-svg-product-huntf288
パレットst-svg-palettee925
instagramst-svg-instagramf16d
twitterst-svg-twitterf099
googlest-svg-googlef1a0
pinterestst-svg-pinterest-pf231
amazonst-svg-amazonf270
wordpressst-svg-wordpressf19a
double-upst-svg-double-upf102
double-downst-svg-angle-double-downf103
double-rightst-svg-angle-double-rightf101
angle-downst-svg-angle-downf107
angle-rightst-svg-angle-rightf105
angle-upst-svg-angle-upf106
caret-rightst-svg-caret-rightf0da
arrow-circle-o-rightst-svg-arrow-circle-o-rightf18e
arrow-circle-rightst-svg-arrow-circle-rightf0a9
arrow-rightst-svg-arrow-rightf061
chevron-downst-svg-chevron-downf078
chevron-rightst-svg-chevron-rightf054
arrowst-svg-arrowe900

AFFINGER6を検討中の方

AFFINGER6の導入を検討中の方は「AFFINGER6を4年使用した感想・レビュー」も読んでみてください。

実際にAFFINGERを4年利用した経験をもとに、本音でレビューしました。メリット・デメリットを包み隠さず感想を書きましたので、きっと役に立つと思います。

この記事タイトルとURLをコピー
  • この記事を書いた人
  • 最新記事

シャイニーゆう

ブログ歴4年|月収収益6桁達成
30代前半サラリーマン＆子育てパパ
副収入で生活を楽にしたいという方向けにブログの魅力を発信中！

-AFFINGER