Skip to content

Instantly share code, notes, and snippets.

@ericakfranz
Last active February 15, 2016 20:46
Show Gist options
  • Save ericakfranz/9439492e2d992f77eb6a to your computer and use it in GitHub Desktop.
Save ericakfranz/9439492e2d992f77eb6a to your computer and use it in GitHub Desktop.
Replace default navigation arrows with FontAwesome Icons.
/*** Make nav arrows always visible (optional) ***/
.envirabox-nav { visibility: visible !important; }
/* Remove default navigation arrow background images */
.envirabox-nav span { display: none !important; }
/* Make the clickable nav area larger */
.envirabox-nav { width: 30% !important; height: 100% !important; }
/* Add custom FontAwesome nav arrows */
.envirabox-nav::before {
display: block;
font-family: 'FontAwesome';
position: absolute;
top: 50%;
/*** Color of the icons, modify as desired ***/
color: #fff !important;
/*** Font size of the icons, modify as desired ***/
font-size: 50px;
}
/* Prev nav arrow */
.envirabox-prev::before {
/*** Replace with the FontAwesome icon unicode you want to use ***/
content: '\f104';
left: 0 !important;
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
transform: translate(50%, -50%);
}
.envirabox-next::before {
/*** Replace with the FontAwesome icon unicode you want to use ***/
content: '\f105';
right: 0 !important;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment