Fontawesome icons are not displayed

[pmoreno-rodriguez]

Why aren't fontawsome icons showing in notice boxes?. In source code appears this: class="sc-notice info", but the icon isn't showing.

[rhukster]

What theme are you using? Does it load Fontawesome CSS?

[pmoreno-rodriguez]

I'm using my own modified Future Imperfect theme (https://github.com/pmoreno-rodriguez/future2021, and yes, the fontawesome 5 css is included in assets.

[Sector035]

I have the same issue, using the Quark Open Publishing template. When I add FA icons to a shortcode accordian (neither by shortcode nor div), they're not visible and the stylesheet isn't loading when I look at the source code of the page. I am able to force the use of FA icons by adding a FA icon within a regular paragraph, outside the accordion items. When doing so, the stylesheet for FA does show up in the source code. Somehow the use of FA icons within info blocks, accordions etc aren't recognised by the parser.

[pmoreno-rodriguez]

Hi. I've had some free time to do some research on this problem. The thing is that I use version 5 of Fontwawesome in my theme, the css styles defined in this plugin are not applied correctly, unless the font, weight (it is essential) and content are modified:

.sc-notice > div:before {
  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f05a";
}

This could be improved, if some modifications are made at the plugin code level, to differentiate the styles that are loaded if Fontawesome version 4 or 5 is chosen (and why not, version 6). In addition, the icons could be differentiated, depending on the type of notice, as follows:

.sc-notice > div:before {
     position: absolute;
     top: 2px;
     color: #fff;
     font-family: "Font Awesome 5 Free"; font-weight: 900;
     left: 10px;
}
.sc-notice.info > div:before {
     content: "\f05a";
}
.sc-notice.tip > div:before {
     content: "\f059";
}
.sc-notice.warning > div:before {
     content: "\f06a";
}
.sc-notice.note > div:before {
     content: "\f249";
}

I will try to make a pull request in this regard, as soon as I have some more time.