アイコンを簡単に呼び出せるショートコードの使い方

2019 6/08
アイコンを簡単に呼び出せるショートコードの使い方
記事上のウィジェットエリア

SWELLでは、数種類のアイコンをフォントとして読み込んでいます。(例: / /

このページでは、これらのアイコンを文中で簡単に呼び出すためのショートコードの使い方を説明していきます。

目次前広告表示エリア
目次

ショートコードの使い方

使い方はとても簡単で、[icon]または[アイコン]というショートコードでアイコンを呼び出すことが可能です。

[icon ここにアイコンクラス名]

または

[アイコン ここにアイコンクラス名]

とするだけです。

もしくは、Font Awesomeのアイコンを使う時などにクラス名が複数必要な場合、

[icon class="ここにアイコンのクラス名"]

または

[アイコン class="ここにアイコンのクラス名"]

としてもクラスを指定できます。

SWELLで読み込んでいるアイコンのクラス名については、以下のページで一覧にしてまとめています。

あわせて読みたい
SWELLで使えるアイコンの一覧
SWELLで使えるアイコンの一覧ここでは、SWELLでフォントファイルとして読み込んでいるアイコンを一覧で紹介しています。SWELLで標準で使用できるアイコンフォントは、IcoMoonで作成しています。Font...

また、SWELLでFont Awesomeを使う方法は以下のページを参考にしてください。

あわせて読みたい
SWELLで「Font Awesome」のアイコンを使う方法
SWELLで「Font Awesome」のアイコンを使う方法このページでは、WordPressテーマ「SWELL」で「Font Awesome」のアイコンを使う方法について解説していきます。【Font Awesomeを読み込む】まずはFont AwesomeのCSSを読...

アイコンの使用例

本文中

グッドです!

上記の文章は、以下のようにエディターに記述しています。

アイコン使用例1
アイコン使用例1

キャプション付きブロックのタイトル部分

ここにも使える!

これは、以下のようにエディターに記述しています。

アイコン使用例2
アイコン使用例2

ボタンの中

これは、以下のようにエディターに記述しています。

アイコン使用例3
アイコン使用例2
記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

目次
目次