liferayliferay-themeliferay-7.1

Cannot access font awesome in custom Liferay 7.1 theme


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?

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.


Solution

  • 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.