トグルボックスの装飾用にFontAwesomeを表示したかったのですが、どうしてもエラーになってしまいます。
何か方法がないものかと試行錯誤して、Cocoonのテンプレートを使うことにしました。
経緯を忘れてテンプレートを消したり編集しないよう、記録として残しておこうと思います。
トグルボックスとは？
トグルボックスというのはこちら
トグルボックス、または、アコーディオンボックスとも言います。
上のボックスをクリックして頂くとわかりやすいです。開いたり、閉じたり、できます。
記事の中で場所をとりたくない場合や、レビューなどでネタバレを隠したりするのに使える便利なボックスです。
当サイトではスキンのデザインを元にプラスアルファでカスタマイズしてるので、デフォルトの表示とは異なりますが役割は同じです。
このボックスのボタン部分にアイコンフォントを表示したいと思いました。
ナニ言ってるの～？
トグルボックスにアイコンフォントを表示したい
先に完成品をお見せしたほうがわかりやすいですね…
アイコンフォントとテキストを並べて表示したいだけ…
上のサンプルにありますが、「コードを見る」というテキストの前にFontAwesomeのアイコンフォントを表示したいと思って試行錯誤しました。
全てのトグルボタンに表示するのであれば、CSSの疑似要素でスタイル指定する方法もあると思いますが、「コードを見る」というテキストの時だけに限定したかったので、悩みました。
失敗の巻
トグルボックスを挿入し、［HTMLとして編集］を使ってフォントコードを貼り付けました。
結果は、見事にエラーとなりました。
［ブロックのリカバリーを試行］すると、貼り付けたコードは消されてしまいます。
そこで、［詳細設定］で［HTMLに変換］を選択してみました。
カスタムHTMLツールバーの［プレビュー］ではアイコンは表示されませんが、ブラウザのほうではちゃんとアイコンとして表示され、いかにも成功したように見えました。
ただ、これだとボックス内の編集までHTMLで行うことになり、かなり面倒です。
アイコンフォントをテンプレートに登録
Cocoonには、繰り返し使う文章などを定型文として登録しておく「テンプレート」があります。
テンプレートはショートコード化されるので、これをトグルボタンに貼り付ければ行けるかな？と思って実験してみることにしました。
テンプレートの登録は簡単です。詳細は テンプレート（定型文）の使い方 をご覧ください。
結果的に思い通りの表示ができたので、テンプレートを採用することにしました。
- STEP1テンプレートに登録する
今回はFontAwesomeのアイコンフォントと合わせて「コードを見る」のテキストも登録してしまいます。
- STEP2トグルボタンにショートコードを貼り付ける
登録したテンプレートは、必要な場所でショートコードを呼び出すだけで簡単に表示できます。
STEP1: FontAwesomeをテンプレートに登録する
ダッシュボード［Cocoon設定］→［テンプレート］
- ［テンプレート］の画面で［新規追加］をクリックします。
- フォーマットに、必要な項目を入力して［保存］します。
- 一覧ページに戻り、ショートコードをコピーします。
今回はFontAwesomeのコードを貼り付けるため、［ビジュアル］タブではなく［テキスト］タブに切り替えて入力しました。
STEP2: トグルボックスにショートコードを貼り付ける
- 記事の編集画面でトグルボックスを挿入します。
- ツールバーの
（テンプレート）のプルダウンリストから、登録したテンプレートを選択します。 
- トグルボックスの色を変更する場合は、サイドバーで「ボーダー色」のカラーパレットを使って変更できます。
編集画面ではショートコードで見えています。
サイトを表示すると、アイコンフォントが表示されています。
完成サンプル
せっかくなので、コード系のアイコンを覚え書き
Name: file-code [Unicode: f1c9 ]
<i class="fas fa-file-code"></i>Name: file-code [Unicode: f1c9 ]
<i class="far fa-file-code"></i>Name: code [Unicode: f121 ]
<i class="fas fa-code"></i>Name: laptop-code [Unicode: f5fc ]
<i class="far fa-file-code"></i>
