legacy-knowledge-base
公開されました Jul. 2, 2025

カスタムテーマでFont Awesomeを適用する方法

投稿者

József Géczi

knowledge-article-header-disclaimer-how-to

knowledge-article-header-disclaimer

legacy-article

learn-legacy-article-disclaimer-text

問題

  • 開発者として、私はMaven経由でカスタムテーマにFont Awesomeを適用したいです。

環境

  • Liferay DXP 7.1

解像度

1) Simple Theme Maven Blade Sample:を元にテーマを作成します。

blade create -t theme -v 7.1 -b maven -p com.liferay.docs.theme -c Theme theme

2) font_awesome.scssClay CSS をテーマに取り込む - Clay Base のカスタマイズ の項に基づいて theme/src/main/webapp/css/font_awesome.scssへ追加します。
テーマが正常にビルドされるか確認します(コマンド 'mvn verify'を実行します)。

3) テーマを Liferay DXP 7.1 にデプロイします。
基本的なWebコンテンツに、例として次のコードを追加します:

<i class="icon-caret-down"></i> icon-caret-down

portal_normal.ftlに、以下のコードを追加してください(例としてもあります)。

<@liferay_ui["icon"] icon="angle-down" />

結果と概念実証テーマのソースは、添付のスクリーンショットを参照してください。

ご注意:Font Awesome v3.2.1付属ClayをCSSルールで適用する場合、 font-familyを使用します:FontAwesome.

追加情報

did-this-article-resolve-your-issue

legacy-knowledge-base