FAMFAMFAM Silk icons for jQuery UI buttons.
Assuming you already have jQuery and jQuery UI installed and working properly.
- Copy
fff-silk.pngto your image folder. - Copy
fff-silk.min.cssto your CSS folder. Remember to change the image URL to suit your needs (it defaults to ../img/fff-silk.png). - Add
fff-silk.min.cssafter your jQUery UI CSS.
Your element must have the fff class in order for the icons to show up. Then you can just use jQuery UI's button function.
<button id="icon-notext" class="fff">icon-notext</button>
$('#icon-notext').button({ text: false, icons: { primary: 'silk-icon-accept' } });
<button id="icon-text" class="fff">icon-text</button>
$('#icon-text').button({ icons: { primary: 'silk-icon-application-home' } });
<button id="icon-text-icon" class="fff">icon-text-icon</button>
$('#icon-text-icon').button({ icons: { primary: 'silk-icon-user-orange', secondary: 'silk-icon-asterisk-orange' } });
<button id="text-icon" class="fff">text-icon</button>
$('#text-icon').button({ icons: { secondary: 'silk-icon-wrench-orange' } });
<button id="icon-icon" class="fff">icon-icon</button>
$('#icon-icon').button({ text: false, icons: { primary: 'silk-icon-cog', secondary: 'silk-icon-bullet-arrow-bottom' } })
- Mark James - Creator of the awesome FAMFAMFAM Silk icons!
- Dan Ryan - For inspiring me to make my own jQuery UI and FAMFAMFAM integration.