jQuery Plugin To Replace Links with Font Awesome Icons - Iconify

File Size: 3.59 KB
Views Total: 637
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Replace Links with Font Awesome Icons - Iconify

Iconify is a tiny jQuery plugin that creates animated & customizable icons for the links using Font Awesome icons.

How to use it:

1. Include the latest jQuery library and jQuery iconify plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.iconify.js"></script>

2. Include the required Font Awesome CSS in the head section fo your page.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

3. Create a link with an unique ID according to Font Awesome's naming rules.

<a href="#" id="facebook"> Facebook </a>
<a href="#" id="twitter"> Twitter </a>
<a href="#" id="google-plus"> Google Plus </a>
<a href="#" id="linkedin"> Linkedin </a>
<a href="#" id="css3"> CSS3 </a>
<a href="#" id="html5"> Html5 </a>

4. Call the plugin with default options.

<script>
$('#twitter').iconify();
$('#facebook').iconify();
$('#google-plus').iconify();
$('#linkedin').iconify();
$('#css3').iconify();
$('#html5').iconify();
</script>

5. Optional setting to customize the icons.

<script>
$('#twitter').iconify({
color: "red",
hoverColor: "blue", 
size: "28", 
animate: true,
animateMultiplier: 1.5 
});
</script>

This awesome jQuery plugin is developed by narendrans. For more Advanced Usages, please check the demo page or visit the official website.