SWELLのアイコンコード一覧、アイコンの設定方法をご紹介します。
- SWELLでアイコンを設定する方法
- SWELLでアイコンを使える場所
- SWELLで使えるアイコン一覧
うっちSWELLでは、簡単にアイコンを挿入できるので、ぜひ活用してくださいね。
「SWELL購入とインストール設定方法」は下記の記事でくわしく解説しています。
SWELLで使うアイコン
SWELLではWebアイコン「Font Awesome」ではなく、独自のアイコン「IcoMoon」を使用しています。
SWELLアイコンは
- ショートコードで使用できる
- CSSでも使用できる
[icon class="icon-wordpress"]SWELLでは簡単にアイコンを挿入できますが、上記のショートコードを入力して表示することもできます。
SWELL公式サイトでも解説されています。
SWELLでアイコンを使う方法
SWELLでのアイコンの使い方を見ていきましょう。
- テキストで使用する
- ブロックで使用する
- ショートコードを使って使用する
順番に見ていきましょう。
1.テキストの中でアイコンを使用する方法
SWELLでは、アイコンを挿入できる「アイコンボタン」がメニューバーにあります。
アイコンを表示したいところで、メニューバーの「アイコン」ボタンをクリックして選択できます。
SWELLのアイコン → 「」
うっちとても簡単にアイコンを表示できますよ。
2.ブロック内でアイコンを使用する方法
SWELLでは、ブロックサイドバーからアイコンの選択・挿入ができます。
- SWELLボタンブロック
- キャプションブロック
- ボックスメニューブロック
SWELLボタンブロック
キャプションブロック
ボックスメニューブロック
こんな感じで簡単にアイコンが使えます。
うっちかんたんで便利ですよ！
3.ショートコードを使ってアイコンを使用する方法
[icon class="icon-wordpress"]SWELLでは、上記のショートコードを入力してアイコンを表示することもできます。
[icon class="icon-wordpress"]↓
このように表示されます。
[icon class="アイコンのクラス名"]「アイコンのクラス名」部分を変更すると色んなアイコンを表示できます。
ショートコードを使ってアイコンを使用する場所
ボタン
SWELLボタンでは、ブロックサイドバーからアイコンの挿入ができますが、ショートコードを使うこともできます。
ウィジェット
各ウィジェット内でも直接ショートコードを入力して、アイコンを表示できます。
メニュー
ヘッダーメニュー（ブローバルナビ）・フッターメニュー内にアイコン表示可能。
メニューの項目に直接ショートコードを入力して、アイコンを表示できます。
SWELLで使えるアイコン一覧
SWELLで使えるアイコンを一部ご紹介します。
[icon class="アイコンのクラス名"]「アイコンのクラス名」部分をコピペして変更して使ってください。
| アイコン | クラス | アイコン | クラス |
|---|---|---|---|
| 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でアイコンを使う方法：まとめ
SWELLでアイコン設定方法や使えるところなどご紹介しました。
SWELLならアイコンも簡単に使えます。アイコン一覧もぜひ活用してくださいね。
うっちSWELLのアイコン設定、使ってくださいね。
「ConoHa WINGでWordPressブログの始め方」はこちらの記事でくわしく解説しています。