Using Font Awesome icons as prevText and nextText

[bjtalbot1]

When I use Font Awesome icons for the prevText and nextText options, like this:

prevText: '<i class="fa fa-chevron-circle-left">',
nextText: '<i class="fa fa-chevron-circle-right">',

... the HTML doesn't come out right—the prevText icon gets duplicated somehow, coming out like this:

<a href="#" class="rslides_nav rslides1_nav prev">
    <i class="fa fa-chevron-circle-left"></i>
</a>

<i class="fa fa-chevron-circle-left">
    <a href="#" class="rslides_nav rslides1_nav next">
        <i class="fa fa-chevron-circle-right"></i>
    </a>
</i>

Any suggestions on how to fix this? I'm kind of a JavaScript beginner. Thanks for any help!

[danielbenjamins]

You have to use the unicode instead of HTML. For fa-chevron-circle-left it's "f137". You have to add "&#x" before the unicode and ";" after to make it work:

prevText: "",   // String: Text for the "previous" button

[bjtalbot1]

Thank you, but when I use that exact code, I just get a box (unfilled) as output.

[danielbenjamins]

Sorry, I forgot to mention that you also have to assign the FontAwesome font to the div or span.

Example:

.prev {
font-family: "FontAwesome";
}

[bjtalbot1]

Ah, yes, that was it! Thank you so much!!