Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fontawesome icons are not displayed #110

Open
pmoreno-rodriguez opened this issue Nov 22, 2021 · 4 comments
Open

Fontawesome icons are not displayed #110

pmoreno-rodriguez opened this issue Nov 22, 2021 · 4 comments

Comments

@pmoreno-rodriguez
Copy link

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

@rhukster
Copy link
Member

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

@pmoreno-rodriguez
Copy link
Author

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
Copy link

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants