多数のアイコンが利用できる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のみの作成となります
Why did I choose Font Awesome Free Plan?
- 折角、Joomla!のテンプレートにCassiopeiaを採用し、そのテンプレート側でFont Awesomeを利用する環境が整えられているにも関わらず、あえて自身でアカウントを取得の上、利用環境を整える選択をしました
- その主な理由は、利用できるアイコン数になります
- Font Awesome customized for Cassiopeia: 約1,000アイコン
- 上記Joomla!4向けのサイトで確認した数値ですから、Joomla!5添付のCassiopeiaテンプレートでは数が異なる可能性はあります
- Font Awesome Free Plan: 約2,000アイコン
- Font Awesome customized for Cassiopeia: 約1,000アイコン
- 金銭的に余裕があれば、有料プランを選択したいところですが、何しろ高額で手がでません
- Font Awesome | Plan
- 最安プランの[Pro Lite]でも$60/Yrです
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)