問題
- 開発者として、私は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.scss
を Clay 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
.
追加情報
- クレイCSSをテーマにインポートする方法:
クレイCSSをテーマにインポートする -
さらに、タグリブでFont Awesomeを適用することも可能です。
<liferay-ui:icon />
この目的のために使うこともできます
Liferay UI Icons