This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Flex slider, change navigation icons

  • Creator
  • #2093

    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…


Viewing 3 replies - 1 through 3 (of 3 total)
  • Author
  • #2097

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

    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: ...;

    Awesome, thanks guys!


Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.