Have you ever wondering if you could replace the bxSlider default controls text, which is Prev / Next, with Font Awesome icons. It turns out it’s very simple but I thought I’d share it on here anyway.
Step 1:
Make sure Font Awesome is being enqueued in the site.
Step 2:
Add the html icon tag for the icon you want to use in the “nextText” and “prevText” options
See the JS snippet below:
jQuery(document).ready(function($) { | |
$('.bxslider-home').bxSlider({ | |
pagerCustom: '#bx-pager', | |
mode: 'fade', | |
onSliderLoad: function(){ | |
$(".bxslider-wrap").css("visibility", "visible"); | |
}, | |
auto: true, | |
nextText: '<i class="fa fa-angle-right"></i>', | |
prevText: '<i class="fa fa-angle-left"></i>' | |
}); | |
}); |
<?php | |
// Load Font Awesome | |
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' ); | |
function enqueue_font_awesome() { | |
wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css', array(), '4.3.0' ); | |
} | |
?> |