Sidr.js overriding Font Awesome class styles

Question

The jQuery plugin sidr.js is overriding my FontAwesome classes for a mobile menu. How do I keep this from happening? For example:

-- HTML --
<a href="#" id="btn"></a>
<ul id="side_nav">
    <li><a href="#"><i class="fa fa-fw fa-desktop"></i> Item 1</a></li>
    <li><a href="#"><i class="fa fa-fw fa-pencil"></i> Item 2</a></li>
    <li><a href="#"><i class="fa fa-fw fa-beer"></i> Item 3</a></li>
</ul>

-- jQuery --
$('#btn').sidr({
    source : '#side_nav'
});

Ends up translating to this:

-- HTML --
<a href="#" id="btn"></a>
<ul id="side_nav">
    <li><a href="#"><i class="sidr-class-fa sidr-class-fa-fw sidr-class-fa-desktop"></i> Item 1</a></li>
    <li><a href="#"><i class="sidr-class-fa sidr-class-fa-fw sidr-class-fa-pencilsidr-class-fa sidr-class-fa-fw sidr-class-fa-beer"></i> Item 2</a></li>
    <li><a href="#"><i class="sidr-class-fa sidr-class-fa-fw sidr-class-fa-beer"></i> Item 3</a></li>
</ul>

I see what's happening, but I'm not sure how to correct it in the plugin. Has anyone else done this?

Here's the link to sidr.js: http://www.berriart.com/sidr/

Answer 1

Have you set the "renaming" option to false

e.g.

$(selector).sidr( {renaming: false} );