HTML5, CSS3 & JS Experiments

By Martin Ivanov

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;
}