Styling Previous and Next buttons in Slick Slider with Font Awesome Icons

slick-slider-prev-next.css

/* Must include Font Awesome (here: https://fortawesome.github.io/Font-Awesome/get-started/) for icons to show up */

.slick-prev,
.slick-next {
    font-size: 0;
    position: absolute;
    bottom: 20px;
    color: #d5122f;
    border: 0;
    background: none;
    z-index: 1;
}

.slick-prev {
    left: 20px;
}

.slick-prev:after {
	  content: "\f104";
    font: 40px/1 'FontAwesome';
}

.slick-next {
    right: 20px;
    text-align: right;
}

.slick-next:after {
	   content: "\f105";
     font: 40px/1 'FontAwesome';
}

.slick-prev:hover:after,
.slick-next:hover:after {
    color: #7e7e7e;
}

to override the theme.css provided by slick, just change :after by :before in the code above.
Otherwise, you'll see the default prev/next images + the font awesome chevrons.

to override the theme.css provided by slick, just change :after by :before in the code above.
Otherwise, you'll see the default prev/next images + the font awesome chevrons.

thx

Hi, I have updated the code with the latest version of slick slider: https://gist.github.com/c8351e28412a194aac977bf996c4a6d8