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
    Topic
  • #2093
    webbredaktorerna
    Participant

    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

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

    @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

    #2107
    Jason Bobich
    Keymaster

    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: ...;
    }
    #2578
    webbredaktorerna
    Participant

    Awesome, thanks guys!

    🙂

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