広告：ページ内にてアフィリエイト広告を利用しています。
SWELLでは、多数のアイコン表示に対応しています。アイコンを使うことで、ワンポイントで分かりやすく記事内を装飾することができますね。
ポイント
本記事では、
アイコンを表示する方法とアイコン一覧を解説します。
アイコンを使ってかっこいいページにしていきましょう。
アイコンの使い方
SWELL アイコンを使い場合は、ショートコードにクラス名を記載します。
[icon class="アイコンクラス名"]■ アイコンの使用例
本文中に記載する
ポイント
本を読みます。
注意が必要です。
ボタンの中に使える
電話番号ボタンに電話番号アイコンを使っています。
ポイント
SWELL アイコン一覧
SWELL で使えるアイコンの一覧です。
| アイコン | クラス名 | アイコン | クラス名 |
|---|---|---|---|
| icon-caret-down | icon-caret-left | ||
| icon-caret-right | icon-caret-up | ||
| icon-chevron-down | icon-chevron-left | ||
| icon-chevron-right | icon-chevron-up | ||
| icon-home | icon-tag | ||
| icon-folder | icon-file-empty | ||
| icon-bubble | icon-bubbles | ||
| icon-eye | icon-link | ||
| icon-share | icon-film | ||
| icon-image | icon-heart | ||
| icon-star-empty | icon-star-full | ||
| icon-star-half | icon-blocked | ||
| icon-info | icon-info-fill | ||
| icon-alert-outline | icon-alert | ||
| icon-modified | icon-posted | ||
| icon-settings | icon-download | ||
| icon-lock-open | icon-lock-closed | ||
| icon-person | icon-mail | ||
| icon-cart | icon-phone | ||
| icon-pen | icon-quill | ||
| icon-flag | icon-bookmark | ||
| icon-book | icon-megaphone | ||
| icon-thumb_down | icon-thumb_up | ||
| icon-light-bulb | icon-light-bulb-fill | ||
| icon-circle | icon-x | ||
| icon-triangle | icon-check | ||
| icon-hatena | icon-minus | ||
| icon-plus | icon-toc | ||
| icon-search | icon-close-thin | ||
| icon-menu-thin | icon-more_arrow | ||
| icon-swell | icon-tiktok | ||
| icon-room | icon-amazon | ||
| icon-codepen | icon-facebook | ||
| icon-feedly | icon-github | ||
| icon-hatebu | icon-instagram | ||
| icon-line | icon-medium | ||
| icon-pinterest | icon-pocket | ||
| icon-rss | icon-tumblr | ||
| icon-twitter | icon-wordpress | ||
| icon-youtube |
ぜひ、すてきなサイトを作ってくださいね。
SWELL の利用方法などについてココナラにて「支援作業」を販売しております。
よかったらご利用くださいませ。
一番上に戻る（Back to the initial position on click.）
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。
