Veteran Owned & Operated 
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:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| 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>' | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
| <?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' ); | |
| } | |
| ?> |
Have Questions? I can help! Get Started
