
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
angular-fontawesome
Advanced tools
http://picardy.github.io/angular-fontawesome/demo/
A simple directive for FontAwesome icons. Avoid writing a massive ngStyle
declaration for your FontAwesome integration, and use the power of Angular to make interactive icon-based widgets.
Include the FontAwesome CSS and fonts in your application by following their instructions.
Include the angular-fontawesome module in your Angular app.
angular.module('myApp', ['picardy.fontawesome'])
Use the directive on any page which bootstraps your app.
<fa name="spinner" spin ng-style="{'color': checkColor}"></fa>
<!-- $scope.checkColor = 'blue' -->
<!-- rendered -->
<i class="fa fa-spinner fa-spin" style="color:blue;"></i>
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>
The icon's name, such as fa-spinner
or fa-square
.
<fa name="github"></fa>
<!-- rendered -->
<i class="fa fa-github"></i>
For accessibility support, you can now add an alt attribute, which will add a screen-reader friendly replacement text.
<fa name="github" alt="github website"></fa>
<!-- rendered -->
<i class="fa fa-github" aria-hidden="true"></i>
<span class="sr-only">github website</span>
notice: the 'sr-only' class will hide the text from anyone not using a screen reader. It is derived 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;
}
The icon's font size, either defined by a multiplier (1-5), or by the string "large"
.
<fa name="square" size="{{ currentSize }}"></fa>
<!-- $scope.currentSize = 3 -->
<!-- rendered -->
<i class="fa fa-square fa-3x"></i>
Flip the icon horizontal
or vertical
.
<fa name="pencil" flip="vertical"></fa>
<!-- rendered -->
<i class="fa fa-pencil fa-flip-vertical"></i>
Rotate the icon 90
, 180
, or 270
degrees.
<fa name="floppy-o" rotate="90"></fa>
<!-- rendered -->
<i class="fa fa-floppy-o fa-rotate-90"></i>
Animate the icon to spin. You don't need to provide true to use the boolean attributes:
<fa name="spinner" spin></fa>
<!-- rendered -->
<i class="fa fa-spinner fa-spin"></i>
You can pass in true
or false
to the attribute as well, allowing the spin class to be be easily toggleable.
<fa name="{{ isLoading ? 'spinner' : 'check' }}" spin="{{ isLoading }}"></fa>
<!-- rendered -->
<i class="fa fa-spinner fa-spin"></i>
<fa name="envelope" border></fa>
<!-- rendered -->
<i class="fa fa-envelope fa-border"></i>
<fa name="book" fw></fa>
<!-- rendered -->
<i class="fa fa-book fa-fw"></i>
<fa name="home" inverse></fa>
<!-- rendered -->
<i class="fa fa-home fa-inverse"></i>
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"></fa>
Text here
<fa class="check"></fa>
</li>
</ul>
<!-- rendered -->
<ul class="fa-ul">
<li>
<i class="fa fa-li fa-square"></i>
Text here
<!-- <fa>s that aren't the first <fa> in the <li> do not automatically get the fa-li class -->
<i class="fa fa-check"></i>
</li>
</ul>
The faStack
directive is used as a wrapper for stacked fonts used by FontAwesome.
<fa-stack size="1-5|large">
<fa name="ICON_NAME" stack="1-5|large"></fa>
<fa name="ICON_NAME" stack="1-5|large"></fa>
</fa-stack>
When using as a wrapper, you must also specify the 'stack' attribute on the children, as described here. Failure to do so will render the fonts, just not one on top of another like we want them to.
fa-stack
testspull="left"
, pull="right"
MIT Licensed by Picardy.
FAQs
Angular directive for FontAwesome
The npm package angular-fontawesome receives a total of 673 weekly downloads. As such, angular-fontawesome popularity was classified as not popular.
We found that angular-fontawesome demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.