SWELLボタンのアイコン表示位置を文字の直後に変更するカスタマイズ

SWELLボタンでは、文字の直前にアイコンを挿入することができて便利ですが（ver. 2.2.2以降に機能実装）、これを文字の直後に変更するカスタマイズ方法です。

動作サンプル

通常は、

のように、アイコンが文字の直前に配置されますが、

のように、文字を先に、アイコンを後に変更することができます。

アイコンを文字の直後に変更するカスタマイズ手順

まず最初に、外観 > カスタマイズ > 追加CSSなどに、以下のCSSをコピペして入力しておきます。

.button-icon-right span {
order: 1;
}
.button-icon-right .__icon {
order: 2;
margin-left: 0.5em;
margin-right: 0;
}

アイコンを文字の直後に変更したいボタンの「高度な設定」の追加CSSクラスに、button-icon-rightと入力してください。

位置を入れ替えたいボタンのみbutton-icon-rightというクラス名を割り振っています。また、具体的にはorder: 1;とorder: 2;で順番を入れ替えていて、アイコンが左にある場合は右にマージンが0.5emありますが、それを0にして、左にマージンを0.5em足しています。

（おまけ）SWELLボタンのアイコンは、Font Awesomeも一部使用可能

SWELLボタンのアイコンは、デフォルトで用意されている以下のアイコンのほかに、Font Awesomeの.fasと.fabと.farが使用可能です。

たとえば、リンクであることを示すfas fa-external-link-alt（アイコンの詳細はこちら）や、右矢印のfas fa-chevron-circle-right（アイコンの詳細はこちら）など、特に便利そうです。

他にも色々探してみてください。