I think it's best to submit a ticket, I couldn't find enough in the comments or wherever (Google is my friend).
So my problem currently is:
I've included a font-awesome pro membership in my website. To use these icons, i had to use special code in the flip boxes for example because salient doesn't automatically recognize the icons.
The code im using for the front side is this:
<i class="fad fa-drafting-compass"></i> Concept, Scientific Groundwork and Feasibility
So basically it's an icon with some text in the next line. This works in the frontend editor and shows on the website as expected. (I think I even got this from one of the comments or tickets about the salient theme)
The thing is that with this implementation i cannot update the page in the backend editor. It just clears the complete front side-content of the flipbox whenever i click update-page..
It must be because of the <i> Tag I'm quite sure, because when i just enter normal text in the backend editor it works fine.
Gonna escalate it to the developer so he may add in a response .
Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
the front-end editor does not strip HTML in the same way as the back-end editor since it's a custom editor from WPBakery and it can bypass some of the restrictions normally there. However, there is still a way to add custom icons to each of the boxes as your desire by simply using CSS. I'd be glad to edit the page for you to accomplish that - is there any way you can provide a temporary admin account?
Hey, so I realized after logging in that you were making use of "Duotone"icons. The custom CSS for that would end up being annoying for you to maintain, so I instead provided you with a simple JS snippet to handle it. Now you can edit the parent column for each box and simply add the relevant classname for the icon you need. The script will then create the HTML markup in the flip box where needed. Please see the attached screenshot for an example. Also, note that the "fad" class is not needed, only the actual icon name e.g. "fa-drafting-compass"
Oh holy WOW! I did not expect that kind of good and fast support!! Thank you very much for clearing this up!
I think it would be good if somewhere (maybe at the end of this ticket if it's actually public) would be a step-by-step guide to solve this. Like "1. added small css to page 2. added raw js sript to page (including code example) and 3. added class to column where the flipbox is in". Could you provided that or does it not make sense?
The following script can be added to the "raw JS" page builder element. It's purpose is to look for the font awesome icon class name and then create the relevant icon HTML markup inside a flip box:
Hello there :)
I think it's best to submit a ticket, I couldn't find enough in the comments or wherever (Google is my friend).
So my problem currently is:
I've included a font-awesome pro membership in my website. To use these icons, i had to use special code in the flip boxes for example because salient doesn't automatically recognize the icons.
The code im using for the front side is this:
<i class="fad fa-drafting-compass"></i>
Concept, Scientific Groundwork and Feasibility
So basically it's an icon with some text in the next line. This works in the frontend editor and shows on the website as expected. (I think I even got this from one of the comments or tickets about the salient theme)
The thing is that with this implementation i cannot update the page in the backend editor. It just clears the complete front side-content of the flipbox whenever i click update-page..
It must be because of the <i> Tag I'm quite sure, because when i just enter normal text in the backend editor it works fine.
Hey ,
Yes thats correct the Flipbox Fields dont accept html tags so this will likely have to be placed using custom css.
Bes t
ThemeNectar Support Team
Hmm.. how would i achieve this?
Hey Again,
Gonna escalate it to the developer so he may add in a response .
Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Thanks
ThemeNectar Support Team
Hey joykevinmaldini,
the front-end editor does not strip HTML in the same way as the back-end editor since it's a custom editor from WPBakery and it can bypass some of the restrictions normally there. However, there is still a way to add custom icons to each of the boxes as your desire by simply using CSS. I'd be glad to edit the page for you to accomplish that - is there any way you can provide a temporary admin account?
Cheers
Just saw that already added in an account below - I'll update you shortly
Hey, so I realized after logging in that you were making use of "Duotone"icons. The custom CSS for that would end up being annoying for you to maintain, so I instead provided you with a simple JS snippet to handle it. Now you can edit the parent column for each box and simply add the relevant classname for the icon you need. The script will then create the HTML markup in the flip box where needed. Please see the attached screenshot for an example. Also, note that the "fad" class is not needed, only the actual icon name e.g. "fa-drafting-compass"
Oh holy WOW! I did not expect that kind of good and fast support!! Thank you very much for clearing this up!
I think it would be good if somewhere (maybe at the end of this ticket if it's actually public) would be a step-by-step guide to solve this. Like "1. added small css to page 2. added raw js sript to page (including code example) and 3. added class to column where the flipbox is in". Could you provided that or does it not make sense?
Sure thing
The following script can be added to the "raw JS" page builder element. It's purpose is to look for the font awesome icon class name and then create the relevant icon HTML markup inside a flip box:
<script> jQuery('div.wpb_column[class*="fa-"]').each(function(){ var classes = this.className.split(/\s+/), $this = jQuery(this); jQuery.each(classes, function(i, name) { if (name.indexOf('fa-') === 0) { $this.find('.flip-box-front .inner').prepend('<i class="fad '+name+'"></i>'); } }); }); </script>With that added to the page, you can then simply add the font awesome icon class name into the parent column in the extra class name field like so:
Lastly, the following CSS can be added in on the same page via the custom css box to fix the styling of the icons:
.wpb_column:before { display: none; }