X-Icon: HTML5 Web Component for Font Awesome

AcidJs.XIcon is another (hopefully) useful HTML5 Web Component for generating icons as custom tags using the amazing icon set of Font Awesome.

Usage

[sourcecode language=”html”]
<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>
[/sourcecode]

HTML Attributes of the Tag

Apart from the standard HTML attributes (style, class, id, etc.), the tag also supports the following component-specific attributes:

• name – Name of the icon. Check the currently available icons here. If name is not set, a warning will be displayed.
• spin – The setting of the attribute makes the icon spin continuously.
• size – Width and height of the icon. Available sizes: "lg" (large, +33%), "2x", "3x", "4x" and "5x". The default size is 16px or 1em.
• rotate – The setting of the attribute will rotate the icon by the degree value set. Possible values: "90", "180" or "270".
• flip – Flip the icon horizontally or vertically. Possible values: "horizontal" or "vertical".

Check the code of the demo page or the distribution to see how to use X-Icon and have an awesome day!

If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.