Icons for Font Awesome
AcidJs X-Icon uses the icon sets of Font Awesome. Check the currently available icons here. Start using X-Icon now:
<acidjs-xicon name="home"></acidjs-xicon> <acidjs-xicon name="spinner" spin size="2x"></acidjs-xicon> <acidjs-xicon name="shield" rotate="90" size="3x"></acidjs-xicon> <acidjs-xicon name="facebook" flip="horizontal" size="3x"></acidjs-xicon>
Demo
AcidJs X-Icon uses the icon sets of Font Awesome. Check the currently available icons here.
Sizes
Default
Large (+33%)
2x
3x
4x
5x
Spinning Icons
Rotated Icons
Normal
90deg
180deg
270deg
Horizontally Flipped
Vertically Flipped
Colored Icons
The color of individual or group of icons can be changed via style or class.
Register Mozilla's X-Tags
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<script src="AcidJs.XIcon/lib/x-tag-components.js"></script>
Register the Component on the Page via HTML5 @import
You need to do this just once, and add the directive either in the <head /> section or before the closing <body /> tag of the page.
<link rel="import" href="AcidJs.XIcon/classes/XIcon.html" />
HTML Attributes
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
JavaScript API: Methods, Getters and Setters
Check the blogpost or the documentation in the distrubution file (the download link is at the top of the page).
Usage and Code Insight
<p>AcidJs X-Icon uses the icon sets of <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome</a>. Check the currently available
icons <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">here</a>.</p>
<h4>Sizes</h4>
<div class="grid">
<div>
<div>
<h5>Default</h5>
<acidjs-xicon name="home"></acidjs-xicon>
</div>
<div>
<h5>Large (+33%)</h5>
<acidjs-xicon name="home" size="lg"></acidjs-xicon>
</div>
<div>
<h5>2x</h5>
<acidjs-xicon name="home" size="2x"></acidjs-xicon>
</div>
<div>
<h5>3x</h5>
<acidjs-xicon name="home" size="3x"></acidjs-xicon>
</div>
<div>
<h5>4x</h5>
<acidjs-xicon name="home" size="4x"></acidjs-xicon>
</div>
<div>
<h5>5x</h5>
<acidjs-xicon name="home" size="5x"></acidjs-xicon>
</div>
</div>
</div>
<h4>Spinning Icons</h4>
<div class="grid">
<div>
<div>
<acidjs-xicon name="spinner" spin size="2x"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="circle-o-notch" spin size="2x"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="refresh" spin size="2x"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="cog" spin size="2x"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="home" spin size="2x"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="git" spin size="2x"></acidjs-xicon>
</div>
</div>
</div>
<h4>Rotated Icons</h4>
<div class="grid">
<div>
<div>
<h5>Normal</h5>
<acidjs-xicon name="shield" size="3x"></acidjs-xicon>
</div>
<div>
<h5>90deg</h5>
<acidjs-xicon name="shield" rotate="90" size="3x"></acidjs-xicon>
</div>
<div>
<h5>180deg</h5>
<acidjs-xicon name="shield" rotate="180" size="3x"></acidjs-xicon>
</div>
<div>
<h5>270deg</h5>
<acidjs-xicon name="shield" rotate="270" size="3x"></acidjs-xicon>
</div>
<div>
<h5>Horizontally Flipped</h5>
<acidjs-xicon name="twitter" flip="vertical" size="3x"></acidjs-xicon>
</div>
<div>
<h5>Vertically Flipped</h5>
<acidjs-xicon name="facebook" flip="horizontal" size="3x"></acidjs-xicon>
</div>
</div>
</div>
<h4>Colored Icons</h4>
<p>The color of individual or group of icons can be changed via <code>style</code> or <code>class</code>.</p>
<div class="grid">
<div>
<div>
<acidjs-xicon name="twitter" size="3x" style="color: #55acee;"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="facebook" size="3x" style="color: #3b5998;"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="paypal" size="3x" style="color: #3b5998;"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="skype" size="3x" style="color: #009fe3;"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="linkedin-square" size="3x" style="color: #0077b5;"></acidjs-xicon>
</div>
<div>
<acidjs-xicon name="lastfm" size="3x" style="color: #d12127;"></acidjs-xicon>
</div>
</div>
</div>
/*
* Icon HTML5 Web Component by Martin Ivanov (@wemakesitesnet)
* More info regarding this exciting new technology: http://webcomponents.org/, http://www.x-tags.org/, http://www.polymer-project.org/
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
/*
* USAGE:
* 1. If you are planning to use this component for a personal project, please retain the credits in the code. Donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS), however is highly appreciated.
* 2. If you will use it on a live website, donation (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS) is required.
**/
acidjs-xicon
{
display: inline-block;
vertical-align: middle;
cursor: default;
}
acidjs-xicon b
{
color: #b00;
font-size: .75em;
}