Flex slider, change navigation icons

[webbredaktorerna]

Hi Jason,
I am trying to get my head around the whole font awesome thing…

I would like to change the icons used in the slider navigation. (How do I do that?)

I want to change the icon in the class: icon-step-forward
I would like to use the: icon-double-angle-right from Font Awesome.

How do I tell that in the CSS? I’m lost…

Cheers
//Daniel

Topic

[Bluenotes]

@Jason, Hope you don’t mind if I chime in. I was in the neighborhood.

Daniel,
I had to do this for a client on his slider. Throw this in your child theme css file.

Left Arrow

.flex-direction-nav .flex-prev .icon-circle-arrow-left:before {content:"XXXX";}

Right Arrow

.flex-direction-nav .flex-next .icon-circle-arrow-right:before {content:"XXXX";}

Change XXXX to the proper font icon you want. example: \f0a0
You can see the codel ist in jumpstart/framework/frontend/assets/plugins/fontawesome/css/font-awesomeness.css

[Jason Bobich]

Yup, @Bluenotes has it down. And if you just wanted get rid of the fontawesome icon and use an image instead you could do it something like this, as well:

.standard-slider-wrapper .flex-direction-nav li a {
	width: ...;
	height: ...;
	text-indent: -9999px; /* Get rid of the fontawesome icon */
}
.standard-slider-wrapper .flex-direction-nav li a.flex-prev {
	background: ...;
}
.standard-slider-wrapper .flex-direction-nav li a.flex-next {
	background: ...;
}
.standard-slider-wrapper .flex-direction-nav li a.flex-play {
	background: ...;
}
.standard-slider-wrapper .flex-direction-nav li a.flex-pause {
	background: ...;
}

[webbredaktorerna]

Awesome, thanks guys!

🙂

[Author]

Replies