ブログでよく使うWebアイコンをまとめました。
使用するWebアイコンは、
この3つです。
※REMIX ICONを使用する方法は以下の記事を参考にしてください。
それぞれアイコンの形や大きさなどが微妙に違うんですが、ここではWebアイコンの特性は解説しません。
| 背景色 | AFFINGER専用ブロック | ショートコード使用 |
| 白 | ◎ | ○ |
| 薄青 | ○ | ○ |
※文章中にWebアイコンを表示させる方法については以下の記事に詳しく書いています。
- AFFINGERを検討中なら
向き不向き・購入手順・特典をまとめました。
→ 特典まとめを見る - すでにAFFINGERを使っているなら
初期設定〜収益化の近道を整理しています。
→ 初期設定の全体像を見る
AFFINGERオリジナルWebアイコン一覧
AFFINGER6のブロックメニューのアイコンリスト＋AFFINGERオリジナルアイコンをまとめています。
| 名称 | アイコン | クラス名 |
|---|---|---|
| ペン | st-svg-pencil | |
| 万年筆 | fas fa-pen-fancy | |
| メモ | st-svg-file-text-o | |
| メモ（反転） | st-svg-file-text | |
| ペンとメモ | st-svg-pencil-square-o | |
| チェック | st-svg-check | |
| チェック（V） | fas fa-check-circle | |
| 注意 | st-svg-exclamation-circle | |
| 警告 | fas fa-exclamation-triangle | |
| リンク | st-svg-link | |
| はてな | st-svg-question-circle | |
| 虫めがね | st-svg-search | |
| 虫めがね（＋） | st-svg-search-plus | |
| 虫めがね（－） | st-svg-search-minus | |
| 矢印「右」① | st-svg-angle-double-right | |
| 矢印「右」② | st-svg-angle-right | |
| 矢印「右」③ | st-svg-caret-right | |
| 矢印「右」④ | st-svg-arrow-circle-o-right | |
| 矢印「右」⑤ | st-svg-arrow-circle-right | |
| 矢印「右」⑥ | st-svg-arrow-right | |
| 矢印「下」① | st-svg-angle-double-down | |
| 矢印「下」② | st-svg-angle-down | |
| 矢印「下」③ | st-svg-arrow | |
| 矢印「上」① | st-svg-double-up | |
| 矢印「上」② | st-svg-angle-up | |
| 目 | st-svg-eye | |
| 目隠し | st-svg-eye-slash | |
| カメラ | st-svg-camera | |
| カメラ（レトロ） | st-svg-camera-retro | |
| ギフト | st-svg-gift | |
| ハート | st-svg-heart | |
| ユーザー | st-svg-user | |
| コメント | st-svg-comment | |
| 電球 | st-svg-lightbulb-o | |
| 電球（黒） | st-svg-lightbulb | |
| お知らせ | st-svg-bullhorn | |
| メール | st-svg-envelope-o | |
| メール（反転） | st-svg-envelope | |
| 紙飛行機 | st-svg-paper-plane | |
| コード | st-svg-code | |
| ショートコード | st-svg-shortcode | |
| ダイヤモンド | st-svg-diamond | |
| ダウンロード① | st-svg-download | |
| ダウンロード② | st-svg-cloud-download | |
| st-svg-twitter | ||
| YouTube | st-svg-youtube-play | |
| Amazon | st-svg-amazon | |
| 王冠 | st-svg-oukan | |
| トロフィー | st-svg-trophy | |
| 賞 | fas fa-award | |
| 初心者 | st-svg-bigginer_l | |
| インフォ | st-svg-info-circle | |
| マル | st-svg-circle-o | |
| バツ① | st-svg-times | |
| バツ② | fas fa-times-circle | |
| 二重マル | st-svg-circle-w | |
| 三角 | st-svg-triangle | |
| Like | st-svg-thumbs-o-up | |
| Like（反転） | st-svg-thumbs-up | |
| Bad | st-svg-thumbs-o-down | |
| Bad（反転） | st-svg-thumbs-down | |
| 指さし | st-svg-hand-o-right | |
| 指さし（反転） | st-svg-hand-right | |
| 表情（嬉） | st-svg-emotion-smile | |
| 表情（普） | st-svg-emotion-meh | |
| 表情（悲） | st-svg-emotion-frown |
- AFFINGERを検討中なら
向き不向き・購入手順・特典をまとめました。
→ 特典まとめを見る - すでにAFFINGERを使っているなら
初期設定〜収益化の近道を整理しています。
→ 初期設定の全体像を見る
ブランド系 Webアイコン
SNS系アイコン
| st-svg-twitter | ||
| Facebook① | st-svg-facebook | |
| Facebook② | st-svg-facebook-square | |
| YouTube | st-svg-youtube-play | |
| st-svg-instagram | ||
| TikTok | fab fa-tiktok |
チャット系アイコン
| LINE | st-svg-line | |
| SMS | fas fa-sms | |
| Facebook Messenger | fab fa-facebook-messenger |
その他ブランドアイコン
| WordPress | st-svg-wordpress | |
| st-svg-pinterest-p | ||
| Evernote | fab fa-evernote | |
| ウィキペディア | fab fa-wikipedia-w |
グーグル系
| st-svg-google | ||
| chrome | fab fa-chrome | |
| chromecast | fab fa-chromecast | |
| アンドロイド | fab fa-android | |
| Google Play | fab fa-google-play | |
| Googleドライブ | fab fa-google-drive | |
| Google Pay | fab fa-google-pay |
アマゾン系
| Amazon | st-svg-amazon | |
| Audible | fab fa-audible | |
| Amazon Pay | fab fa-cc-amazon-pay |
アップル系アイコン
| Apple | fab fa-apple | |
| iTune | fab fa-itunes | |
| Safari | fab fa-safari | |
| Apple Pay | fab fa-apple-pay |
マイクロソフト系
| Microsoft | fab fa-microsoft | |
| Windows | fab fa-windows | |
| Excelファイル | far fa-file-excel | |
| Wordファイル | far fa-file-file-word | |
| パワーポイント | far fa-file-powerpoint | |
| PDFファイル | far fa-file-pdf | |
| edge | fa-brands fa-edge-legacy | |
| Skype | fab fa-skype |
支払い系アイコン
| visa | fab fa-cc-visa | |
| JCB | fab fa-cc-jcb | |
| mastercard | fab fa-cc-mastercard | |
| American Express | fab fa-cc-amex | |
| PayPal① | fab fa-cc-paypal | |
| PayPal② | fa-brands fa-paypal |
その他、よく使うWebアイコン一覧
| 歯車 | fa-solid fa-gear | |
| ファン | fa-solid fa-fan | |
| プラス | st-svg-plus-thin | |
| マイナス | st-svg-minus-thin | |
| 質問 | fa-brands fa-quora | |
| 答え | fa-solid fa-a | |
| 時計 | st-svg-clock-o | |
| 家（HOME） | st-svg-home | |
| フォルダー | st-svg-folder | |
| フォルダー（open） | st-svg-folder-open-o | |
| ピン | st-svg-thumb-tack | |
| ペン | st-svg-pencil-square-o | |
| コピー① | st-svg-copy | |
| コピー② | far fa-copy | |
| クレジット | st-svg-credit-card-alt | |
| お金 | st-svg-money | |
| カート | st-svg-shopping-cart | |
| 外部リンク | st-svg-external-link | |
| マップ | st-svg-map-marker | |
| P | st-svg-product-hunt | |
| サインイン | st-svg-sign-in | |
| サインアウト | st-svg-sign-out | |
| 目次 | st-svg-toc | |
| クリップ | st-svg-paperclip | |
| ロック | st-svg-lock | |
| ロック（空き） | st-svg-unlock-alt | |
| 鍵 | fas fa-key | |
| PC | st-svg-desktop | |
| タブレット | st-svg-tablet | |
| スマホ | st-svg-mobile | |
| プリント | st-svg-print | |
| SDカード | fas fa-sd-card | |
| USB | fab fa-usb | |
| チャート | st-svg-line-chart | |
| 写真 | st-svg-picture-o | |
| st-svg-pdf-o | ||
| ZIP | st-svg-file-zip-o | |
| 新聞 | st-svg-newspaper-o | |
| スター | st-svg-star | |
| スター（half） | st-svg-star-half-o | |
| スター（反転） | st-svg-star-o | |
| プラグ | st-svg-plug | |
| 本 | st-svg-book | |
| ブックマーク | st-svg-bookmark | |
| タグ | st-svg-tag | |
| フラッグ | st-svg-flag | |
| ベル | st-svg-bell | |
| 魔法 | st-svg-magic | |
| カレンダー | st-svg-calendar | |
| 箱 | st-svg-inbox | |
| パレット | st-svg-palette | |
| 爆弾 | fas fa-bomb | |
| バーコード | fas fa-barcode | |
| バースデーケーキ | fas fa-birthday-cake | |
| 王冠 | fas fa-crown | |
| データベース | fas fa-database | |
| サーバー | fas fa-server | |
| リスト | fas fa-list | |
| 番号リスト | fas fa-list-ol | |
| タスク | fas fa-tasks | |
| 電話 | fas fa-phone | |
| うんこ | fas fa-poo | |
| ロボット | fas fa-robot | |
| サイトマップ | fas fa-sitemap | |
| オンに切り替え | fas fa-toggle-on | |
| オフに切り替え | fas fa-toggle-off |
回転系アイコン
| 歯車 | fa-solid fa-gear | |
| スピナー | fa-solid fa-spinner | |
| ファン | fa-solid fa-fan |
コンピューター系アイコン
| MacBook（REMIX ICON） | ri-macbook-line | |
| キーボード | fas fa-keyboard | |
| マウス | fas fa-mouse | |
| ダウンロード | fas fa-download | |
| Wi-Fi | fas fa-wifi |
デザイン系アイコン
| パレット | fas fa-palette | |
| ペイントブラシ | fas fa-paint-brush | |
| 定規 | fas fa-ruler-combined | |
| 編集 | fas fa-edit | |
| レイヤー | fas fa-layer-group |
乗り物系アイコン
| 乗用車 | fas fa-car | |
| 乗用車（横） | fas fa-car-side | |
| 電車 | fas fa-subway | |
| バス | fas fa-bus | |
| ガソリンスタンド | fas fa-gas-pump |
スポーツ系アイコン
| 野球 | fas fa-baseball-ball | |
| ラグビー | fas fa-football-ball | |
| サッカー | fas fa-futbol | |
| 卓球 | fas fa-table-tennis | |
| スキー | fas fa-skiing |
- AFFINGERを検討中なら
向き不向き・購入手順・特典をまとめました。
→ 特典まとめを見る - すでにAFFINGERを使っているなら
初期設定〜収益化の近道を整理しています。
→ 初期設定の全体像を見る
