1. Forums
  3. Support and Presales
  5. Developer Members Support
  7. Font Awesome 5

Font Awesome 5

5 years 4 months ago #309106 by activha
Font Awesome 5 was created by activha
Hello

We just moved to Font Awesome 5 Pro with our template and use the shims to deal with old font awesome 4 icons.

This works fine but for some plugins the template do not refer correctly to the icons.
For instance in groupjive the template uses
<span class="fa-before fa-globe">
instead of
<span class="fa fa-before fa-globe">
Thus the icon is not correctly displayed even with shims for Font Awesome 5

Would it be possible to add
fa
in every icon css displayed in CB, so that we can use it instead of manually changing all the plugins templates ?

Thanks for the hint
Jean

Please Log in to join the conversation.

5 years 4 months ago #309108 by krileon
Replied by krileon on topic Font Awesome 5
We do not support Font Awesome 5 at this time. It has no backwards compatibility except by using a shim which basically doubles the CSS. Recommend leaving CBs Font Awesome on.

fa-before by it self is a CB added class. It causes the Font Awesome styling to only apply to :before instead of the element it's directly on.

It'll likely be a couple more stable CB versions before we update Font Awesome as it's going to be significant work. Close to the amount of work needed for the Bootstrap upgrade as we won't want to be forced to use the shim.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

5 years 4 months ago #309115 by activha
Replied by activha on topic Font Awesome 5
We understand your point but we already moved our template to Font Awesome Pro 5 and activating CB FontAwesome does conflict with version 5 of the template so this is not an option.

It is rather easy to use the shim file for the time being everything has been upgraded. So if CB would use the standard "fa" code in the plugins templates that would be easier.

For CB template itself it's pretty simple to use the template changer plugin to alter template.css file.

Main changes are only required in CB Groupjive if you don't mind to add the fa word ?

Please Log in to join the conversation.

5 years 4 months ago #309119 by krileon
Replied by krileon on topic Font Awesome 5

So if CB would use the standard "fa" code in the plugins templates that would be easier.

No, we're using it to apply font awesome styling to :before without tampering with the element it self. This allows us to add a prefix icon without adding extra elements to the page and without altering the font style of the text in the element its attached to. Our fa-before is not compatible with Font Awesome 5. Once we update for Font Awesome 5 the fa-before usage will be entirely removed. For now that is absolutely not going to happen (there are a significant amount of such usages). Again, we don't support Font Awesome 5; update and use it at ones own risk. You will have to add your own custom CSS workarounds for any broken icons.

Kyle (Krileon)
Community Builder Team Member
Before posting on forums: Read FAQ thoroughly + Read our Documentation + Search the forums
CB links: Documentation - Localization - CB Quickstart - CB Paid Subscriptions - Add-Ons - Forge
--
If you are a Professional, Developer, or CB Paid Subscriptions subscriber and have a support issue please always post in your respective support forums for best results!
--
If I've missed your support post with a delay of 3 days or greater and are a Professional, Developer, or CBSubs subscriber please send me a private message with your thread and will reply when possible!
--
Please note I am available Monday - Friday from 8:00 AM CST to 4:00 PM CST. I am away on weekends (Saturday and Sunday) and if I've missed your post on or before a weekend after business hours please wait for the next following business day (Monday) and will get to your issue as soon as possible, thank you.
--
My role here is to provide guidance and assistance. I cannot provide custom code for each custom requirement. Please do not inquire me about custom development.

Please Log in to join the conversation.

5 years 4 months ago #309152 by activha
Replied by activha on topic Font Awesome 5
OK for people that would need it, it's pretty simple to make a new template with CB template changer, then change all FontAwesome family reference to
  font-family: "Font Awesome 5 Pro" !important;
like hereunder (and don't forget the compulsory font-weight:400
.cb_template .fa {
  font-family: "Font Awesome 5 Pro" !important;
  /* MARKED IMPORTANT TO AVOID BEING OVERRIDDEN */
  font-weight: 400;  
}

.cb_template .fa:before,
.cb_template .fa-before:before,
.cb_template .fa-raw,
.cb_template .fa-raw:before,
.cb_template .fa-raw-before:before {
  display: inline-block;
  font: normal normal normal 14px/1 "Font Awesome 5 Pro";
  font-weight: 400;  
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Font Awesome 5 Pro" !important;
  font-weight: 400;
  /* MARKED IMPORTANT TO AVOID BEING OVERRIDDEN */
}

By using Font Awesome 5 Pro with shims its seems to work fine this way with CB and all its plugins

The only drawback that I noticed so far is a problem with the fa-smile-o icon in CB Activity that should be fa-smile in order to work correctly with the new FontAwesome.

Have to find a workaround for this one without making a template override

Hope it helps someone in the mean time
The following user(s) said Thank You: nant, krileon, mikerotec, Julien04

Please Log in to join the conversation.

Moderators: beat, nant, krileon
  1. Forums
  3. Support and Presales
  5. Developer Members Support
  7. Font Awesome 5
Time to create page: 0.575 seconds

Search

Login / Logout

User Menu