Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save leadbellydesign/e89f20f2befebfb661c7a7743e9837b5 to your computer and use it in GitHub Desktop.
Save leadbellydesign/e89f20f2befebfb661c7a7743e9837b5 to your computer and use it in GitHub Desktop.
Styling Previous and Next buttons in Slick Slider with Font Awesome Icons
/* 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;
}
@leadbellydesign
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment