WordPress「SWELL」では、数種類のアイコンを使用できます。通常の文章に使用することも、ヘッダーのメニューにも使用することもできます。
目次
SWELLアイコンまとめ
SWELLにて使用できるアイコンの一覧を下記にまとめてあります。例として、本ホームページのヘッダーメニューにも使用している「設定方法について簡単に紹介します。
ヘッダーメニュー「の設定方法
STEP
WordPress管理画面>外観>メニュー
STEP
該当のメニューのナビゲーションラベルに以下のように入力する

※[icon class=”○○○”]の○○○にクラス名を入れる。
STEP
このように表示されます

アイコン一覧
| アイコン | クラス名 |
|---|---|
| 矢印 | |
| icon-chevron-down | |
| icon-chevron-left | |
| icon-chevron-right | |
| icon-chevron-up | |
| icon-caret-down | |
| icon-caret-left | |
| icon-caret-right | |
| icon-caret-up | |
| swl-inline-icon | |
| icon-more_arrow | |
| 記号・形 | |
| icon-check | |
| icon-circle | |
| icon-triangle | |
| icon-x | |
| icon-hatena | |
| icon-alert-outline | |
| icon-alert | |
| icon-info | |
| icon-info-fill | |
| 不明 | |
| 不明 | |
| icon-blocked | |
| icon-minus | |
| icon-plus | |
| icon-heart | |
| icon-star-empty | |
| icon-star-full | |
| icon-star-half | |
| コミュニケーション | |
| icon-phone | |
| icon-mail | |
| icon-bubble | |
| icon-bubbles | |
| icon-bookmark | |
| icon-light-bulb | |
| icon-light-bulb-fill | |
| icon-megaphone | |
| icon-thumb_down | |
| icon-thumb_up | |
| icon-share | |
| メディア・ファイル | |
| icon-file-empty | |
| icon-film | |
| icon-image | |
| 仕事・勉強 | |
| icon-pen | |
| icon-quill | |
| icon-book | |
| icon-folder | |
| icon-posted | |
| icon-toc | |
| ショップ・お金 | |
| icon-shopping_cart | |
| icon-cart | |
| icon-tag | |
| その他 | |
| icon-flag | |
| icon-home | |
| icon-lock-closed | |
| icon-lock-open | |
| icon-settings | |
| icon-download | |
| icon-modified | |
| icon-search | |
| icon-eye | |
| icon-person | |
| 不明 | |
| icon-link | |
| ロゴ | |
| icon-facebook | |
| icon-instagram | |
| icon-line | |
| icon-pinterest | |
| icon-pocket | |
| icon-tiktok | |
| icon-twitter | |
| icon-twitter-x | |
| icon-youtube | |
| icon-codepen | |
| icon-github | |
| icon-hatebu | |
| icon-medium | |
| icon-room | |
| icon-tumblr | |
| icon-amazon | |
| icon-feedly | |
| icon-rss | |
| icon-wordpress | |
| 不明 | |
| icon-swell | |




コメント