Cannot access font awesome in custom Liferay 7.1 theme

0
votes

I build a custom theme for Liferay 7.1 via Maven, which works fine. I'm using current versions for CSS-Builder, Theme-Builder, css.common, theme.styled and theme.unstyled (Theme-Builder references _styled) I've read that alloy is no longer part of theming (right?) but can still be used as a module.

My concrete problem: I need to use fontawesome icons in the theme, but a.t.m. it doesn't seem to be integrated.

One piece of custom CSS code is for example

content: "\00a0\f0d7";
font-family: 'fontawesome-alloy';

Which steps am I missing to have fontawesome-alloy in my theme?

  • Maven Dependencies?
  • @include in scss?
  • POM parameters for CSS-Builder and/or Theme-Builder?

Update 2019-08-22 - Thanks so far, but the suggested default steps don't work. A partner provided the theme for us when upgrading to DXP / 7.0 and migrated it to 7.1. I've made a few corrections but cannot fix this issue. Liferay icons in theme templates show nothing and importing results in file not found errors while building with maven. I've opened a ticket and will ask the partner to fix the problem. I'll update here when I receive a corrected version that I can diff against our version control to identify the underling problem.

Update 2019-08-27 - It turned out (via ticket and example in response) that Milen's hint to "Integrating Third Party Themes with Clay" does the trick. In addition I had to use "FontAwesome" as font-family and notation "\f0d7" instead of "\00a0\f0d7". Now the theme looks like before in DXP 7.0. Also relevant is the usage of versions 3.0.1 and 3.0.4 instead of "current versions" (4.x.x) for frontend-dependencies, which lead to "file not found" problems regarding font awesome import while building with maven.

2
liferayliferay-themeliferay-7.1
I've read that alloy is no longer part of theming (right?) : no, it was deprecated but it is there. Also, given that it is used everywhere inside Liferay itself, it might take a while to go away... – Victor

2 Answers

1
votes

I assume you use Clay which is the default in Liferay Portal 7.1. If so, it does have own icons and therefore it does not include font-awesome by default. Some hints how to use font-awesome icons are available in "Integrating Third Party Themes with Clay" docs.

0
votes

You can use the provided taglib as explained at:

https://portal.liferay.dev/docs/7-1/tutorials/-/knowledge_base/t/liferay-ui-icons

In your theme, you use it like the following example:

<@liferay_ui["icon"]
    image="../language/${language_id}"
    message=flag_message
/>

Please note that to use Font Awesome icons, you need to include the icon attribute instead of image. Like in the following example: (The example is not for Freemarker but for JSPs, the taglib can be used in both places)

<liferay-ui:icon icon="angle-down" />

Please, also note that it does not provide the latest icons, but from: https://fontawesome.com/v3.2.1/icons/

If you want newer versions, you have to include the version you want manually.

However, if you are happy with the provided inside themes, not on the taglib, but the one added by Liferay when the Theme is built ( it should live on build/css/font-awesome ) you can find everything you need within the scss sub directory. This directory is included by the file build/css/font_awesome.scss

Example of sniped for _custom.scss

@import 'liferay-font-awesome/scss/font-awesome';
@import 'liferay-font-awesome/scss/glyphicons';