Carousel indicators and arrows


#1

Greetings to all, how can I change the style of the indicators, instead of the one that comes by defaul, which is like a line, I want the circulars or points! and how can I change the carousel arrow type? any suggestion is welcome


#2

@Norm alguna idea?


#3

Hello @nelo

Here’s one way to change the arrow icons.

The arrows icons are fontawesome and named fa-chevron-left (and right)

Go to fontawesome.com/icons and search for chevron and you’ll fint it there.
There’s also a nice circular arrow called chevron-circle-left (and right)

Click the chevron-circle-left and you’ll see it also has an id (f137)

Go to Page > Settings > Add Code > Header
And paste this code:

<style>	
.fa-chevron-left:before {
  content: "\f137";
  font-family: "FontAwesome";
}
.fa-chevron-right:before {
  content: "\f138";
  font-family: "FontAwesome";
}
</style>

f138 is of course for the right arrow.

icon-04

You need to preview in browser to see the result.

To adjust the size of the icon create a new class in the Class Manager.
There is a premade class just for the icons in the drop down menu, use that.

Set the text size to change the arrows size.

And voila… we now have the circular arrow icon :sunglasses:

Cheers / Johny


#4

Hi Johny @Jakerlund

Thank you very much for this detailed explanation.

MDS


#5

Hi Johny @Jakerlund

Can I abuse some of your time ? I have a Font Awesome pro subscription. Do you know if there is a way to dump them in the Blocs 3 core files ? Would be so much easier.

Thanks in advance for any insight on this.

MDS


#6

Hi @MDS

I’m afraid i know nothing about that :weary:


#7

No problem. Thanks anyway.

MDS


#8

oh wonderful, thank you very much for the answer! … would apply the same for the indicators? regards