MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

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

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

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

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

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

ショートコードの使い方

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

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

または

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

とするだけです。

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

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

または

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

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

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

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

アイコンの使用例

本文中

グッドです!

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

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

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

ここにも使える!

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

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

ボタンの中

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

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

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

目次
閉じる