Summary
- 多数のアイコンが利用できるFont Awesomeを導入します
Font Awesome customized for Cassiopeia
- 実は特に「導入」せずともJoomla 4.0.0よりカスタマイズされたFont AwesomeがTemplate: Cassiopeiaで使用できる状態になっています
Refelence
Sample
<span class="icon-joomla large-icon" aria-hidden="true"> </span>- The Joomla! icon: by Custmized Awesome Font for Cassiopeia
- Caution 上記スクリプトをTinyMCEのSource codeにて入力する場合、span要素内の[空白1字]は[ ]とエスケープ処理する必要があります
Font Awesome
- FONT AEWSOME
- Font AwesomeのFree Planで使用できるのはFree Styleのみです
- Free Style version: 6.7.2 (2025/07/12現在)
- また、Free Planでは1kitのみの作成となります
Procedure
- Font Awesome公式サイトにてアカウントを登録します
- 同サイトにて自身のサイト用のkitを作成し、専用のscript要素を取得します
- [A]と[B]は同じ固有の文字列で[Kit Name]と呼ばれます
- [C]のボタンをクリックしてscript要素をコピーします
- 上記script要素をTemplate: Cassiopeia-chid template-index.phpのindex.phpのhead要素内に挿入します
Usage
- Font Awesome公式サイトにて挿入したいアイコンを検索します
- アイコンの詳細からi要素をコピーします
- Joomla!のArticle作成画面を開きます
- Articles:Edit > Tab: Content > Blk: Article Text
- コード編集画面に変更します
- Menu:Tools > Source Code+をクリックします
- 挿入希望箇所に手順2でコピーした文字列を貼り付けます
- ただし、このまま保存しても、TinyMCEのオートコレクト機能で削除されてしまいます
- そこでi要素に空白文字のエスケープ[ ]を挿入します
- Saveをクリックしてコード編集画面を閉じます
- 再度開くと、i要素はTinyMCEによってem要素に置換され、[ ]も空白文字になっていますが、そのままとします
- 私見ですが、Font Awesomeがi要素を使用することが正当であって、TinyMCEがi要素をem要素に置換することが誤認している様に感じます
- すなわち、 Font Awesomeがイタリック体にするために、i要素を使ったわけではなく、通常のテキストとは区別されるアイコンであることの明示が目的であると推察されるのです
- もっとも、手順5, 手順6ともEditorにCode Mirrorを使用すれば、そんな手間や意図しない変換で不愉快な思いをしなくて済むのですが、WYSIWYGに慣れてしまうとCode Mirrorはどうしたって面倒です
- Code Mirrorであれば、当然i要素を挿入できますし、空白文字も不要なのですが...
- アイコンが挿入されたことを確認します
- Save等をクリックしてArticleを保存します
Sample
<i class="fa-brands fa-joomla"></i>- The Joomla! icon: by Font Awesome (official site)