The fa directive's attributes map to the classes used by FontAwesome.
<fa name="ICON-NAME"
alt="TEXT-ALTERNATIVE"
size="1-5|large"
flip="horizontal|vertical"
rotate="90|180|270"
spin
border
list></fa>
name
The icon's name, such as 'spinner' or 'square'.
<fa name="fighter-jet"></fa>
alt
For accessibility support, add an alt attribute, which will add screen-reader friendly replacement text in a separate element.
<fa name="github" alt="github website"></fa>
(inspect the source to see the .sr-only tag)
Note
The sr-only class should hide the text from anyone not using a screen reader. It is taken from Bootstrap, so if you're not using Bootstrap, you must add this style to your css:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
flip
Flip the icon 'horizontal' or 'vertical'
<fa name="pencil"></fa>
<fa name="pencil" flip="horizontal"></fa>
<fa name="pencil" flip="vertical"></fa>
rotate
Rotate the icon 90, 180, or 270 degrees.
<fa name="floppy-o"></fa>
<fa name="floppy-o" rotate="90"></fa>
<fa name="floppy-o" rotate="180"></fa>
<fa name="floppy-o" rotate="270"></fa>
spin
Animate the icon to spin.
You don't need to provide true to use the boolean attributes in angular-fontawesome:
<fa name="spinner" spin></fa>
You can pass in true or false to the attribute as well, allowing the spin class to be be easily toggleable.
<script>
angular.module('myApp', ['picardy.fontawesome'])
.controller('MyController', function($scope) {
$scope.isLoading = false;
// simulate loading.
$scope.reload = function () {
$scope.isLoading = true;
$timeout(function () {
$scope.isLoading = false;
}, 1000);
};
});
</script>
<div ng-controller="MyController">
<button class="btn" ng-disabled="isLoading" ng-click="reload()">
<fa name="{{ isLoading ? 'spinner' : 'check' }}"
spin="{{ isLoading }}"></fa>
<span ng-hide="isLoading">reload</span>
</button>
</div>
list
This directive autodetects if you're setup to do fa-li and then takes care of it for you.
<ul class="fa-ul">
<li>
<fa name="square" list></fa>
Text here
</li>
<li>
<fa name="check" list></fa>
Another item
<fa name="map-signs"></fa>
</li>
<li>
<fa name="square" list></fa>
A third
</li>
</ul>
-
Text here
-
Another item
-
A third
stack
The faStack directive is used as a wrapper for FontAwesome's stacked icon behavior.
<fa-stack size="large">
<fa name="square-o" stack="2"></fa>
<fa name="bullseye" stack="1"></fa>
</fa-stack>
When using <fa-stack> as a wrapper, you must also specify the 'stack' attribute on the children. Failure to do so will render the fonts, just not one on top of another like we want them to.
