Solved SP Page Builder

Override Font Awesome classes for SP Page Builder Elements

Asked by FJN 2 years ago Last activity 2 years 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>

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

Accepted answer

Marked as the solution

Rashida Rahman Staff

2 years ago

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

2 more replies

FJN Asked this

2 years ago

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!

Rashida Rahman Staff

2 years ago

Glad that it worked and you are always welcome:)

Have a nice day!