<style type="text/css">
{{>index-css}}
</style>

<div class="intro">
    <p>
    {{description}}
    </p>
    <p>
       <b>Notes:</b>
       <ul>
           <li>You need to load this module <u>together with 'gallerycss-itsa-base'</u> in order to work.</li>
           <li>These fonticons always need to be declared inside a <u>i-element</u>, see the examples.</li>
           <li>Special thanks to <a href='http://fontello.com' target='_blank'>http://fontello.com</a> by which means this gallerymodule is created</li>
       </ul>
    </p>
</div>

{{>getting-started}}

<h2>Description</h2>
<p>By adding this module, you have some classnames at your proposal, which can be used to create icons. The css only works if you define an empty <code>i-element</code> and add the right class to it. Typically the icons are inside a <code>button-element</code> but this is not required.
</p>
<p>
    Be aware of the load-delay. Iconfonts-modules have are relative big-sized. To speed up initial loading, it is advizable to load the css-modules in a second separate Y.use() statement without a callback.
</p>

<h2>Available iconclasses</h2>
    <ul>
        <li><i class="itsaicon-social-amazon"></i> <code>itsaicon-social-amazon</code></li>
        <li><i class="itsaicon-social-android"></i> <code>itsaicon-social-android</code></li>
        <li><i class="itsaicon-social-bitbucket"></i> <code>itsaicon-social-bitbucket</code></li>
        <li><i class="itsaicon-social-bitcoin"></i> <code>itsaicon-social-bitcoin</code></li>
        <li><i class="itsaicon-social-blogger"></i> <code>itsaicon-social-blogger</code></li>
        <li><i class="itsaicon-social-call"></i> <code>itsaicon-social-call</code></li>
        <li><i class="itsaicon-social-call2"></i> <code>itsaicon-social-call2</code></li>
        <li><i class="itsaicon-social-call3"></i> <code>itsaicon-social-call3</code></li>
        <li><i class="itsaicon-social-cloudapp"></i> <code>itsaicon-social-cloudapp</code></li>
        <li><i class="itsaicon-social-duckduckgo"></i> <code>itsaicon-social-duckduckgo</code></li>
        <li><i class="itsaicon-social-delicious"></i> <code>itsaicon-social-delicious</code></li>
        <li><i class="itsaicon-social-dropbox"></i> <code>itsaicon-social-dropbox</code></li>
        <li><i class="itsaicon-social-drupal"></i> <code>itsaicon-social-drupal</code></li>
        <li><i class="itsaicon-social-ebay"></i> <code>itsaicon-social-ebay</code></li>
        <li><i class="itsaicon-social-email"></i> <code>itsaicon-social-email</code></li>
        <li><i class="itsaicon-social-facebook"></i> <code>itsaicon-social-facebook</code></li>
        <li><i class="itsaicon-social-flickr"></i> <code>itsaicon-social-flickr</code></li>
        <li><i class="itsaicon-social-git"></i> <code>itsaicon-social-git</code></li>
        <li><i class="itsaicon-social-github"></i> <code>itsaicon-social-github</code></li>
        <li><i class="itsaicon-social-gplus"></i> <code>itsaicon-social-gplus</code></li>
        <li><i class="itsaicon-social-guest"></i> <code>itsaicon-social-guest</code></li>
        <li><i class="itsaicon-social-headphones"></i> <code>itsaicon-social-headphones</code></li>
        <li><i class="itsaicon-social-instagram"></i> <code>itsaicon-social-instagram</code></li>
        <li><i class="itsaicon-social-linkedin"></i> <code>itsaicon-social-linkedin</code></li>
        <li><i class="itsaicon-social-macstore"></i> <code>itsaicon-social-macstore</code></li>
        <li><i class="itsaicon-social-mobile"></i> <code>itsaicon-social-mobile</code></li>
        <li><i class="itsaicon-social-myspace"></i> <code>itsaicon-social-myspace</code></li>
        <li><i class="itsaicon-social-openid"></i> <code>itsaicon-social-openid</code></li>
        <li><i class="itsaicon-social-opentable"></i> <code>itsaicon-social-opentable</code></li>
        <li><i class="itsaicon-social-paypal"></i> <code>itsaicon-social-paypal</code></li>
        <li><i class="itsaicon-social-podcast"></i> <code>itsaicon-social-podcast</code></li>
        <li><i class="itsaicon-social-reddit"></i> <code>itsaicon-social-reddit</code></li>
        <li><i class="itsaicon-social-rss"></i> <code>itsaicon-social-rss</code></li>
        <li><i class="itsaicon-social-skype"></i> <code>itsaicon-social-skype</code></li>
        <li><i class="itsaicon-social-soundcloud"></i> <code>itsaicon-social-soundcloud</code></li>
        <li><i class="itsaicon-social-spotify"></i> <code>itsaicon-social-spotify</code></li>
        <li><i class="itsaicon-social-tumblr"></i> <code>itsaicon-social-tumblr</code></li>
        <li><i class="itsaicon-social-twitter"></i> <code>itsaicon-social-twitter</code></li>
        <li><i class="itsaicon-social-vimeo"></i> <code>itsaicon-social-vimeo</code></li>
        <li><i class="itsaicon-social-wikipedia"></i> <code>itsaicon-social-wikipedia</code></li>
        <li><i class="itsaicon-social-wordpress"></i> <code>itsaicon-social-wordpress</code></li>
        <li><i class="itsaicon-social-youtube"></i> <code>itsaicon-social-youtube</code></li>
    </ul>

<h2>Usage</h2>
```html
<button><i class="itsaicon-social-twitter"></i></button>
```

```js
YUI(yuiconfig).use('yui-base', function(Y) {
    Y.use('gallerycss-itsa-base', 'gallerycss-itsa-social'); // now the iconfonts will load asynchroniously

    // code can be executed
    ...

});
```
<h3>Changing size</h3>
<p>Iconfonts are handled as regular characters. The font size is detemined by the calculated font-size value of the element. To change the icon-size, you need to change the font-size.
</p>
<p>
The iconfont has its definition inside <code>.itsaicon-iconname:before</code>. You can set a fontsize here, or at a ancestor-node, depending what needs to be set.
</p>
```css
button {
    font-size: 120%;
}
.itsaicon-social-twitter:before {
    font-size: 150%;
}
```

<h3>Changing color</h3>
<p>Iconfonts are handled as regular characters. The iconcolor is detemined by the calculated color-value of the element. To change the icon-color, you need to change the color of the icon.
</p>
<p>
The icon-color has its definition inside <code>.itsaicon-iconname:before</code>. You can set a color here, or at a ancestor-node, depending what needs to be set.
</p>
```css
button {
    color: #F00;
}
.itsaicon-social-twitter:before {
    color: #0F0;
}
```
<h2>Creating imagebuttons (purecss compatible)</h2>
    <p>
        Imagebuttons can be created by creating a button and add an empty <code>i-element</code> inside. To be sure the space arround the iconfont gets right, you need to add the right classname to the button as well.
    </p>
    <p>
        These iconfonts work perfectly well with pure-css. So you can add the class <code>pure-button</code> to the button-element. But you don't need to.
    </p>

<h3>Iconbuttons without text</h3>
```html
<button<i class="itsaicon-social-twitter"></i></button>
```

<h3>Textbuttons with a left-icon</h3>
```html
<button class="itsabutton-iconleft"><i class="itsaicon-social-twitter"></i>Twitter</button>
```

<h3>Textbuttons with a right-icon</h3>
```html
<button class="itsabutton-iconright">Twitter<i class="itsaicon-social-twitter"></i></button>
```

<h3>Rounded buttons with a border</h3>
    <p>
        Bordered and rounded buttons can be made by using special button-classes supllied by <a href='http://gallerydocs.itsasbreuk.nl/gallerycss-itsa-base/index.html' target='_blank>'>gallerycss-itsa-base</a>.
    </p>
```html
<button class="pure-button itsabutton-bordered itsabutton-rounded"><i class="itsaicon-social-twitter"></i></button>
```
<h2>Licences</h2>
    Copyright (c) 2013 <a href="http://itsasbreuk.nl">Its Asbreuk</a><br />
    Copyright (c) 2013 <a href="http://developer.yahoo.com/yui/license.html">YUI BSD License</a>
<h3>Font licence info</h3>
<ul class='disc'>
   <li>Iconic<br />
           Copyright (C) 2012 by P.J. Onori<br />
           Author:    P.J. Onori<br />
           License:   SIL (<a href='http://scripts.sil.org/OFL' target='_blank'>http://scripts.sil.org/OFL</a>)<br />
           Homepage:  <a href='http://somerandomdude.com/work/iconic/' target='_blank'>http://somerandomdude.com/work/iconic/</a></li>
   <li>Entypo<br />
           Copyright (C) 2012 by Daniel Bruce<br />
           Author:    Daniel Bruce<br />
           License:   CC BY-SA (<a href='http://creativecommons.org/licenses/by-sa/2.0/' target='_blank'>http://creativecommons.org/licenses/by-sa/2.0/</a>)<br />
           Homepage:  <a href='http://www.entypo.com' target='_blank'>http://www.entypo.com</a></li>
   <li>Font Awesome<br />
           Copyright (C) 2012 by Dave Gandy<br />
           Author:    Dave Gandy<br />
           License:   SIL ()<br />
           Homepage:  <a href='http://fortawesome.github.com/Font-Awesome/' target='_blank'>http://fortawesome.github.com/Font-Awesome/</a></li>
   <li>Elusive<br />
           Copyright (C) 2013 by Aristeides Stathopoulos<br />
           Author:    Aristeides Stathopoulos<br />
           License:   SIL (<a href='http://scripts.sil.org/OFL' target='_blank'>http://scripts.sil.org/OFL</a>)<br />
           Homepage:  <a href='http://aristeides.com/' target='_blank'>http://aristeides.com/</a></li>
   <li>Typicons<br />
           (c) Stephen Hutchings 2012<br />
           Author:    Stephen Hutchings<br />
           License:   CC BY-SA 3.0 (<a href='http://creativecommons.org/licenses/by-sa/3.0/' target='_blank'>http://creativecommons.org/licenses/by-sa/3.0/</a>)<br />
           Homepage:  <a href='http://typicons.com/' target='_blank'>http://typicons.com/</a></li>
   <li>Modern Pictograms<br />
           Copyright (c) 2012 by John Caserta. All rights reserved.<br />
           Author:    John Caserta<br />
           License:   SIL (<a href='http://scripts.sil.org/OFL' target='_blank'>http://scripts.sil.org/OFL</a>)<br />
           Homepage:  <a href='http://thedesignoffice.org/project/modern-pictograms/' target='_blank'>http://thedesignoffice.org/project/modern-pictograms/</a></li>
   <li>Web Symbols<br />
           Copyright (c) 2011 by Just Be Nice studio. All rights reserved.<br />
           Author:    Just Be Nice studio<br />
           License:   SIL (<a href='http://scripts.sil.org/OFL' target='_blank'>http://scripts.sil.org/OFL</a>)<br />
           Homepage:  <a href='http://www.justbenicestudio.com/' target='_blank'>http://www.justbenicestudio.com/</a>
   </li>
</ul>

<script>
{{>init-loaderconfig-js}}
{{>loaderconfig-js}}
{{>index-js}}
</script>