Simple JS library helper for FontAwesome
Download FontAwesome.js from GitHub or install via bower:
$ bower install FontAwesome.jsInclude the fa.js file (or fa.min.js) in your page.
<script src="fa.js"></script>Finally include FontAwesome CSS in your page.
NOTE: You can to use FontAwesome.load() method to add on-the-fly FontAwesome CSS in your page
<!DOCTYPE html>
<html>
<head>
<script src="fa.js"></script>
</head>
<body>
<h1>Hello, FontAwesome.js!</h1>
<script>
// Load FontAwesome CSS
FontAwesome.load();
// Prepend "home" icon to h1 element
FontAwesome.icon('home').prependTo('h1');
</script>
</body>
</html>FontAwesome.js uses the same FontAwesome classes to change the look and the behavior of the icons (see http://fontawesome.io/examples/).
| Option | Description | Allowed Values | Default |
|---|---|---|---|
size |
Size of icon | lg, 2x, 3x, 4x, 5x |
(none) |
fixedWidth |
Fix a width of icon | true, false |
false |
border |
Add a border | true, false |
false |
pullLeft |
Pull icon to left | true, false |
false |
pullRight |
Pull icon to right | true, false |
false |
spin |
Spin animation | true, false |
false |
pulse |
Pulse animation | true, false |
false |
rotate |
Rotate the icon | 90, 180, 270 |
(none) |
flip |
Flip the icon | horizontal, vertical |
(none) |
url |
URL of FontAwesome | - | CDN URL |
id |
Icon ID | - | (none) |
classes |
Additional class | - | (none) |
tag |
Default icon tag | - | i |
Can you change the option globally using the FontAwesome.options object.
For example:
FontAwesome.options = {
pullLeft: true,
url: 'http://example.org/assets/font-awesome/font-awesome.min.css'
}Can you override the global options with FontAwesome.icon method:
FontAwesome.icon('spinner', { spin: true })Add on-the-fly FontAwesome CSS in your page
FontAwesome.load('http://example.org/assets/font-awesome/font-awesome.min.css');Apply a CSS style to icon (chainable method)
FontAwesome.icon('user').css({color: '#DDD'}).element; // <i class="fa fa-user" style="color:#DDD"></i>Prepend the icon for all matches selector
FontAwesome.icon('user').prependTo('h1'); // <h1><i class="fa fa-user"></i>Title</h1>Append the icon for all matches selector
FontAwesome.icon('user').appendTo('h1'); // <h1>Title<i class="fa fa-user"></i></h1>Set the icon and options (chainable method)
Set the stack icon (chainable method)
FontAwesome.icon('terminal', { inverse: true }).stack('square', { size: 'lg'}, true);<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-inverse fa-stack-1x"></i>
</span>FontAwesome.js options (see Options above)
Return a DOMElement of the icon (useful to use with another JS library - eg. jQuery)
jQuery('h1').prepend(FontAwesome.icon('user').element);Currently Supports: FF, Chrome, IE9+ and other modern and decent browsers
Copyright (C) 2016, Giuseppe Di Terlizzi giuseppe.diterlizzi@gmail.com