Override Font Awesome Classes For SP Page Builder Elements - Question | JoomShaper
Back to the questions

Override Font Awesome Classes For SP Page Builder Elements

F

FJN

SP Page Builder 2 months ago

Is there a way to override Font Awesome classes for SP Page Builder elements? Specifically, for the Image Carousel element, we have two FA choices for the scrolling arrows, Angle or Long Arrow. I would love to use Right and Left Chvrons instead. So as an example can I override the following Page Builder HTML somehow. Note that I prefer to do this on the HTML rather than using JavaScript, although that is also an option: 

<i class="fa fa-angle-right" aria-hidden="true"></i>
<i class="fa fa-angle-left" aria-hidden="true"></i>

to

<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-left" aria-hidden="true"></i>
0
3 Answers
Order by
Oldest Newest Votes
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #157074

Hi there!

Thanks for reaching out to us.

You can achieve this by using simple custom CSS. I have checked Image carrousal addon and found fa-long-arrow there. So, if you want to change the fa-long-arrow icon to chevron, only for the Image Carousal, then kindly use the below code snippet you need to put in you custom CSS:

.sppb-carousel-extended .fa.fa-long-arrow-left:before {
    content: "\f053";
}
.sppb-carousel-extended .fa.fa-long-arrow-right:before {
    content: "\f054";
}

Here is all about custom code placement in Helix Ultimate: https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best Regards

0
F
FJN
Accepted Answer
2 months ago #157139

Excellent. That worked beautifully. Changed the scroll arrow type to "Long Arrow" and added the CSS to our Helix custom.css. Thank you so much!

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 2 months ago #157211

Glad that it worked and you are always welcome:)

Have a nice day!

0