Collective.fontawesome not showing icons as expected

Plone Support Theming
1

I get an strange behavior with collective.fontawesome.

The icon (e.g. '\f434) is only shown in the button Learn more about Plone. (see image below)

In all other a-elements the icon is not showing.

I'd expected the icon showing in all a::before-elements.

This can be reproduced in Plone 5.2.6 and 5.2.8 under debian 11.

In a fresh Plone instance (see buildout config file below) with only following modifications:

  • install collective.fontawesome and importing the profile profile-collective.fontawesome:plone5

  • add a ::before-pseudo element in custom.css (see below)

cat <<'EOF' | sudo tee /home/Plone-5.2.8/zeocluster/mybuildout.cfg
[buildout]
extends =
    develop.cfg
eggs +=
    collective.fontawesome
[versions]
collective.fontawesome = 1.1
EOF

In custom.css, i.e. through http://localhost:8080/Plone/@@theming-controlpanel > Advanced Settings > Custom Styles add the following styles:

a::before {
  font-family: "Font Awesome 5 Free";
  color: red;
  content: '\f434';
}

grafik
grafik595×725 46 KB

2

Could this be the case:

  1. The other a's have a 'higher CSS declaration', so they use another (the default) font
  2. The default font does not load properly

I would do this

  1. Remove your custom CSS
  2. Disable and enable the theme (and maybe put it in debug mode in the control panel )
  3. Enable the theme / clear it in the control panel
  4. Check if the other icons are showing
  5. Add your CSS
3

@espenmn: Thank you very much for your valuable hint.

There was indeed 'higher CSS declarations' that lead me to the actual problem:

The a-elemetn in the button "Learn more about Plone" inherits a font-weight declaration set to bold. The other a elements have font-weight: normal.

And the problem's source is ...

Most of the glyphs/characters of the collective.fontawesome seem not to be defined for normal font-weight. They need a bold font-weight setting.