New repository of icons

based on http://fortawesome.github.com/

example/app/articles/icon-brand.html

@@ -1,242 +0,0 @@
-<article id="icons-brands" class="list scroll indented">
-    <ul>
-        <li data-icon="brand google-plus">
-            <a href="#">
-            <strong>google-plus</strong>
-            <small>class .brand.google-plus</small>
-            </a>
-        </li>
-        <li data-icon="brand facebook">
-            <a href="#">
-            <strong>facebook</strong>
-            <small>class .brand.facebook</small>
-            </a>
-        </li>
-        <li data-icon="brand twitter">
-            <a href="#">
-            <strong>twitter</strong>
-            <small>class .brand.twitter</small>
-            </a>
-        </li>
-         <li data-icon="brand feed">
-            <a href="#">
-            <strong>feed</strong>
-            <small>class .brand.feed</small>
-            </a>
-        </li>
-        <li data-icon="brand vimeo">
-            <a href="#">
-            <strong>vimeo</strong>
-            <small>class .brand.vimeo</small>
-            </a>
-        </li>
-        <li data-icon="brand flickr">
-            <a href="#">
-            <strong>flickr</strong>
-            <small>class .brand.flickr</small>
-            </a>
-        </li>
-        <li data-icon="brand dribbble">
-            <a href="#">
-            <strong>dribbble</strong>
-            <small>class .brand.dribbble</small>
-            </a>
-        </li>
-        <li data-icon="brand forrst">
-            <a href="#">
-            <strong>forrst</strong>
-            <small>class .brand.forrst</small>
-            </a>
-        </li>
-        <li data-icon="brand deviantart">
-            <a href="#">
-            <strong>deviantart</strong>
-            <small>class .brand.deviantart</small>
-            </a>
-        </li>
-        <li data-icon="brand github">
-            <a href="#">
-            <strong>github</strong>
-            <small>class .brand.github</small>
-            </a>
-        </li>
-
-        <li data-icon="brand git">
-            <a href="#">
-            <strong>git</strong>
-            <small>class .brand.git</small>
-            </a>
-        </li>
-
-        <li data-icon="brand branch">
-            <a href="#">
-            <strong>branch</strong>
-            <small>class .brand.branch</small>
-            </a>
-        </li>
-
-        <li data-icon="brand fork">
-            <a href="#">
-            <strong>fork</strong>
-            <small>class .brand.fork</small>
-            </a>
-        </li>
-
-        <li data-icon="brand apple">
-            <a href="#">
-            <strong>apple</strong>
-            <small>class .brand.apple</small>
-            </a>
-        </li>
-        <li data-icon="brand android">
-            <a href="#">
-            <strong>android</strong>
-            <small>class .brand.android</small>
-            </a>
-        </li>
-        <li data-icon="brand windows">
-            <a href="#">
-            <strong>windows</strong>
-            <small>class .brand.windows</small>
-            </a>
-        </li>
-        <li data-icon="brand skype">
-            <a href="#">
-            <strong>skype</strong>
-            <small>class .brand.skype</small>
-            </a>
-        </li>
-        <li data-icon="brand linkedin">
-            <a href="#">
-            <strong>linkedin</strong>
-            <small>class .brand.linkedin</small>
-            </a>
-        </li>
-        <li data-icon="brand html5">
-            <a href="#">
-            <strong>html5</strong>
-            <small>class .brand.html5</small>
-            </a>
-        </li>
-
-        <li data-icon="brand css3">
-            <a href="#">
-            <strong>css3</strong>
-            <small>class .brand.css3</small>
-            </a>
-        </li>
-        <li data-icon="brand chrome">
-            <a href="#">
-            <strong>chrome</strong>
-            <small>class .brand.chrome</small>
-            </a>
-        </li>
-        <li data-icon="brand firefox">
-            <a href="#">
-            <strong>firefox</strong>
-            <small>class .brand.firefox</small>
-            </a>
-        </li>
-        <li data-icon="brand IE">
-            <a href="#">
-            <strong>IE</strong>
-            <small>class .brand.IE</small>
-            </a>
-        </li>
-        <li data-icon="brand opera">
-            <a href="#">
-            <strong>opera</strong>
-            <small>class .brand.opera</small>
-            </a>
-        </li>
-
-        <li data-icon="brand wordpress">
-            <a href="#">
-            <strong>wordpress</strong>
-            <small>class .brand.wordpress</small>
-            </a>
-        </li>
-    </ul>
-    <ul>
-        <li class="anchor">Variations</li>
-        <li data-icon="brand google-plus-2">
-            <a href="#">
-            <strong>google-plus-2</strong>
-            <small>class .brand.google-plus-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand twitter-2">
-            <a href="#">
-            <strong>twitter-2</strong>
-            <small>class .brand.twitter-2</small>
-            </a>
-        </li>
-        <li data-icon="brand facebook-2">
-            <a href="#">
-            <strong>facebook-2</strong>
-            <small>class .brand.facebook-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand feed-2">
-            <a href="#">
-            <strong>feed-2</strong>
-            <small>class .brand.feed-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand vimeo-2">
-            <a href="#">
-            <strong>vimeo-2</strong>
-            <small>class .brand.vimeo-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand flickr-2">
-            <a href="#">
-            <strong>flickr-2</strong>
-            <small>class .brand.flickr-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand dribbble-2">
-            <a href="#">
-            <strong>dribbble-2</strong>
-            <small>class .brand.dribbble-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand deviantart-2">
-            <a href="#">
-            <strong>deviantart-2</strong>
-            <small>class .brand.deviantart-2</small>
-            </a>
-        </li>
-        <li data-icon="brand git-2">
-            <a href="#">
-            <strong>git-2</strong>
-            <small>class .brand.git-2</small>
-            </a>
-        </li>
-        <li data-icon="brand github-2">
-            <a href="#">
-            <strong>github-2</strong>
-            <small>class .brand.github-2</small>
-            </a>
-        </li>
-        <li data-icon="brand wordpress-2">
-            <a href="#">
-            <strong>wordpress-2</strong>
-            <small>class .brand.wordpress-2</small>
-            </a>
-        </li>
-
-        <li data-icon="brand html5-2">
-            <a href="#">
-            <strong>html5-2</strong>
-            <small>class .brand.html5-2</small>
-            </a>
-        </li>
-    </ul>
-</article>

example/app/articles/icon-item.html

@@ -0,0 +1,249 @@
+<article id="icon-item" class="list scroll">
+    <ul>
+        <li class="anchor theme">Basic</li>
+        <li data-icon="dashboard">
+            <strong>dashboard</strong>
+            <small>class .dashboard</small>
+        </li>
+        <li data-icon="calendar">
+            <strong>calendar</strong>
+            <small>class .calendar</small>
+        </li>
+        <li data-icon="time">
+            <strong>time</strong>
+            <small>class .time</small>
+        </li>
+        <li data-icon="globe">
+            <strong>globe</strong>
+            <small>class .globe</small>
+        </li>
+        <li data-icon="pushpin">
+            <strong>pushpin</strong>
+            <small>class .pushpin</small>
+        </li>
+        <li data-icon="map-marker">
+            <strong>map-marker</strong>
+            <small>class .map-marker</small>
+        </li>
+        <li data-icon="cog">
+            <strong>cog</strong>
+            <small>class .cog</small>
+        </li>
+        <li data-icon="inbox">
+            <strong>inbox</strong>
+            <small>class .inbox</small>
+        </li>
+        <li data-icon="book">
+            <strong>book</strong>
+            <small>class .book</small>
+        </li>
+
+
+        <li class="anchor theme">Shop</li>
+        <li data-icon="money">
+            <strong>money</strong>
+            <small>class .money</small>
+        </li>
+        <li data-icon="credit-card">
+            <strong>credit-card</strong>
+            <small>class .credit-card</small>
+        </li>
+        <li data-icon="shopping-cart">
+            <strong>shopping-cart</strong>
+            <small>class .shopping-cart</small>
+        </li>
+        <li data-icon="gift">
+            <strong>gift</strong>
+            <small>class .gift</small>
+        </li>
+        <li data-icon="food">
+            <strong>food</strong>
+            <small>class .food</small>
+        </li>
+        <li data-icon="coffee">
+            <strong>coffee</strong>
+            <small>class .coffee</small>
+        </li>
+        <li data-icon="beer">
+            <strong>beer</strong>
+            <small>class .beer</small>
+        </li>
+        <li data-icon="glass">
+            <strong>glass</strong>
+            <small>class .glass</small>
+        </li>
+        <li data-icon="suitcase">
+            <strong>suitcase</strong>
+            <small>class .suitcase</small>
+        </li>
+        <li data-icon="briefcase">
+            <strong>briefcase</strong>
+            <small>class .briefcase</small>
+        </li>
+
+
+        <li class="anchor theme">Building</li>
+        <li data-icon="home">
+            <strong>home</strong>
+            <small>class .home</small>
+        </li>
+        <li data-icon="building">
+            <strong>building</strong>
+            <small>class .building</small>
+        </li>
+        <li data-icon="hospital">
+            <strong>hospital</strong>
+            <small>class .hospital</small>
+        </li>
+
+
+        <li class="anchor theme">Transport</li>
+        <li data-icon="road">
+            <strong>road</strong>
+            <small>class .road</small>
+        </li>
+        <li data-icon="truck">
+            <strong>truck</strong>
+            <small>class .truck</small>
+        </li>
+        <li data-icon="ambulance">
+            <strong>ambulance</strong>
+            <small>class .ambulance</small>
+        </li>
+        <li data-icon="plane">
+            <strong>plane</strong>
+            <small>class .plane</small>
+        </li>
+        <li data-icon="fighter-jet">
+            <strong>fighter-jet</strong>
+            <small>class .fighter-jet</small>
+        </li>
+
+
+        <li class="anchor theme">Medical</li>
+        <li data-icon="medkit">
+            <strong>medkit</strong>
+            <small>class .medkit</small>
+        </li>
+        <li data-icon="stethoscope">
+            <strong>stethoscope</strong>
+            <small>class .stethoscope</small>
+        </li>
+        <li data-icon="user-md">
+            <strong>user-md</strong>
+            <small>class .user-md</small>
+        </li>
+        <li data-icon="h-sign">
+            <strong>h-sign</strong>
+            <small>class .h-sign</small>
+        </li>
+        <li data-icon="beaker">
+            <strong>beaker</strong>
+            <small>class .beaker</small>
+        </li>
+
+
+        <li class="anchor theme">Others</li>
+        <li data-icon="hdd">
+            <strong>hdd</strong>
+            <small>class .hdd</small>
+        </li>
+        <li data-icon="bullhorn">
+            <strong>bullhorn</strong>
+            <small>class .bullhorn</small>
+        </li>
+        <li data-icon="key">
+            <strong>key</strong>
+            <small>class .key</small>
+        </li>
+        <li data-icon="lemon">
+            <strong>lemon</strong>
+            <small>class .lemon</small>
+        </li>
+        <li data-icon="leaf">
+            <strong>leaf</strong>
+            <small>class .leaf</small>
+        </li>
+        <li data-icon="fire">
+            <strong>fire</strong>
+            <small>class .fire</small>
+        </li>
+        <li data-icon="eye-open">
+            <strong>eye-open</strong>
+            <small>class .eye-open</small>
+        </li>
+        <li data-icon="eye-close">
+            <strong>eye-close</strong>
+            <small>class .eye-close</small>
+        </li>
+        <li data-icon="magnet">
+            <strong>magnet</strong>
+            <small>class .magnet</small>
+        </li>
+        <li data-icon="flag">
+            <strong>flag</strong>
+            <small>class .flag</small>
+        </li>
+        <li data-icon="qrcode">
+            <strong>qrcode</strong>
+            <small>class .qrcode</small>
+        </li>
+        <li data-icon="barcode">
+            <strong>barcode</strong>
+            <small>class .barcode</small>
+        </li>
+        <li data-icon="spinner">
+            <strong>spinner</strong>
+            <small>class .spinner</small>
+        </li>
+        <li data-icon="sitemap">
+            <strong>sitemap</strong>
+            <small>class .sitemap</small>
+        </li>
+        <li data-icon="columns">
+            <strong>columns</strong>
+            <small>class .columns</small>
+        </li>
+        <li data-icon="wrench">
+            <strong>wrench</strong>
+            <small>class .wrench</small>
+        </li>
+        <li data-icon="certificate">
+            <strong>certificate</strong>
+            <small>class .certificate</small>
+        </li>
+        <li data-icon="cogs">
+            <strong>cogs</strong>
+            <small>class .cogs</small>
+        </li>
+        <li data-icon="screenshot">
+            <strong>screenshot</strong>
+            <small>class .screenshot</small>
+        </li>
+        <li data-icon="envelope">
+            <strong>envelope</strong>
+            <small>class .envelope</small>
+        </li>
+        <li data-icon="signal">
+            <strong>signal</strong>
+            <small>class .signal</small>
+        </li>
+        <li data-icon="legal">
+            <strong>legal</strong>
+            <small>class .legal</small>
+        </li>
+
+        <li data-icon="umbrella">
+            <strong>umbrella</strong>
+            <small>class .umbrella</small>
+        </li>
+        <li data-icon="bolt">
+            <strong>bolt</strong>
+            <small>class .bolt</small>
+        </li>
+        <li data-icon="lightbulb">
+            <strong>lightbulb</strong>
+            <small>class .lightbulb</small>
+        </li>
+    </ul>
+</article>

example/app/articles/icon-media.html

@@ -0,0 +1,126 @@
+<article id="icon-media" class="list scroll">
+    <ul>
+        <li class="anchor theme">Output</li>
+        <li data-icon="desktop">
+            <strong>desktop</strong>
+            <small>class .desktop</small>
+        </li>
+        <li data-icon="tablet">
+            <strong>tablet</strong>
+            <small>class .tablet</small>
+        </li>
+        <li data-icon="mobile-phone">
+            <strong>mobile-phone</strong>
+            <small>class .mobile-phone</small>
+        </li>
+        <li data-icon="print">
+            <strong>print</strong>
+            <small>class .print</small>
+        </li>
+
+
+        <li class="anchor theme">Type</li>
+        <li data-icon="music">
+            <strong>music</strong>
+            <small>class .music</small>
+        </li>
+        <li data-icon="film">
+            <strong>film</strong>
+            <small>class .film</small>
+        </li>
+        <li data-icon="video">
+            <strong>video</strong>
+            <small>class .video</small>
+        </li>
+        <li data-icon="picture">
+            <strong>picture</strong>
+            <small>class .picture</small>
+        </li>
+        <li data-icon="camera">
+            <strong>camera</strong>
+            <small>class .camera</small>
+        </li>
+        <li data-icon="camera-retro">
+            <strong>camera-retro</strong>
+            <small>class .camera-retro</small>
+        </li>
+
+
+        <li class="anchor theme">Volume</li>
+        <li data-icon="headphones">
+            <strong>headphones</strong>
+            <small>class .headphones</small>
+        </li>
+        <li data-icon="volume-off">
+            <strong>volume-off</strong>
+            <small>class .volume-off</small>
+        </li>
+        <li data-icon="volume-down">
+            <strong>volume-down</strong>
+            <small>class .volume-down</small>
+        </li>
+        <li data-icon="volume-up">
+            <strong>volume-up</strong>
+            <small>class .volume-up</small>
+        </li>
+        <li data-icon="bell">
+            <strong>bell</strong>
+            <small>class .bell</small>
+        </li>
+        <li data-icon="bell-alt">
+            <strong>bell-alt</strong>
+            <small>class .bell-alt</small>
+        </li>
+
+
+        <li class="anchor theme">Player</li>
+        <li data-icon="off">
+            <strong>off</strong>
+            <small>class .off</small>
+        </li>
+        <li data-icon="fast-backward">
+            <strong>fast-backward</strong>
+            <small>class .fast-backward</small>
+        </li>
+        <li data-icon="step-backward">
+            <strong>step-backward</strong>
+            <small>class .step-backward</small>
+        </li>
+        <li data-icon="backward">
+            <strong>backward</strong>
+            <small>class .backward</small>
+        </li>
+        <li data-icon="play">
+            <strong>play</strong>
+            <small>class .play</small>
+        </li>
+        <li data-icon="pause">
+            <strong>pause</strong>
+            <small>class .pause</small>
+        </li>
+        <li data-icon="stop">
+            <strong>stop</strong>
+            <small>class .stop</small>
+        </li>
+        <li data-icon="forward">
+            <strong>forward</strong>
+            <small>class .forward</small>
+        </li>
+        <li data-icon="fast-forward">
+            <strong>fast-forward</strong>
+            <small>class .fast-forward</small>
+        </li>
+        <li data-icon="step-forward">
+            <strong>step-forward</strong>
+            <small>class .step-forward</small>
+        </li>
+        <li data-icon="eject">
+            <strong>eject</strong>
+            <small>class .eject</small>
+        </li>
+        <li data-icon="random">
+            <strong>random</strong>
+            <small>class .random</small>
+        </li>
+    </ul>
+</article>

example/app/articles/icon-social.html

@@ -0,0 +1,185 @@
+<article id="icon-social" class="list scroll">
+    <ul>
+        <li class="anchor theme">Basic</li>
+        <li data-icon="user">
+            <strong>user</strong>
+            <small>class .user</small>
+        </li>
+        <li data-icon="group">
+            <strong>group</strong>
+            <small>class .group</small>
+        </li>
+        <li data-icon="signin">
+            <strong>signin</strong>
+            <small>class .signin</small>
+        </li>
+        <li data-icon="signout">
+            <strong>signout</strong>
+            <small>class .signout</small>
+        </li>
+        <li data-icon="lock">
+            <strong>lock</strong>
+            <small>class .lock</small>
+        </li>
+        <li data-icon="unlock">
+            <strong>unlock</strong>
+            <small>class .unlock</small>
+        </li>
+
+        <li class="anchor theme">Actions</li>
+        <li data-icon="comment">
+            <strong>comment</strong>
+            <small>class .comment</small>
+        </li>
+        <li data-icon="comment-alt">
+            <strong>comment-alt</strong>
+            <small>class .comment-alt</small>
+        </li>
+        <li data-icon="comments">
+            <strong>comments</strong>
+            <small>class .comments</small>
+        </li>
+        <li data-icon="comments-alt">
+            <strong>comment-alt</strong>
+            <small>class .comment-alt</small>
+        </li>
+        <li data-icon="reply">
+            <strong>reply</strong>
+            <small>class .reply</small>
+        </li>
+        <li data-icon="share-alt">
+            <strong>share-alt</strong>
+            <small>class .share-alt</small>
+        </li>
+        <li data-icon="retweet">
+            <strong>retweet</strong>
+            <small>class .retweet</small>
+        </li>
+        <li data-icon="heart-empty">
+            <strong>heart-empty</strong>
+            <small>class .heart-empty</small>
+        </li>
+        <li data-icon="heart">
+            <strong>heart</strong>
+            <small>class .heart</small>
+        </li>
+        <li data-icon="star-empty">
+            <strong>star-empty</strong>
+            <small>class .star-empty</small>
+        </li>
+        <li data-icon="star">
+            <strong>star</strong>
+            <small>class .star</small>
+        </li>
+        <li data-icon="star-half">
+            <strong>star-half</strong>
+            <small>class .star-half</small>
+        </li>
+        <li data-icon="trophy">
+            <strong>trophy</strong>
+            <small>class .trophy</small>
+        </li>
+        <li data-icon="rss">
+            <strong>rss</strong>
+            <small>class .rss</small>
+        </li>
+
+
+        <li class="anchor theme">Thumbs & Hands</li>
+        <li data-icon="thumbs-up">
+            <strong>thumbs-up</strong>
+            <small>class .thumbs-up</small>
+        </li>
+        <li data-icon="thumbs-down">
+            <strong>thumbs-down</strong>
+            <small>class .thumbs-down</small>
+        </li>
+        <li data-icon="hand-right">
+            <strong>hand-right</strong>
+            <small>class .hand-right</small>
+        </li>
+        <li data-icon="hand-left">
+            <strong>hand-left</strong>
+            <small>class .hand-left</small>
+        </li>
+        <li data-icon="hand-down">
+            <strong>hand-down</strong>
+            <small>class .hand-down</small>
+        </li>
+        <li data-icon="hand-up">
+            <strong>hand-up</strong>
+            <small>class .hand-up</small>
+        </li>
+
+
+        <li class="anchor theme">Signing</li>
+        <li data-icon="sign">
+            <strong>sign</strong>
+            <small>class .sign</small>
+        </li>
+        <li data-icon="sign-blank">
+            <strong>sign-blank</strong>
+            <small>class .sign-blank</small>
+        </li>
+        <li data-icon="twitter-sign">
+            <strong>twitter-sign</strong>
+            <small>class .twitter-sign</small>
+        </li>
+        <li data-icon="twitter">
+            <strong>twitter</strong>
+            <small>class .twitter</small>
+        </li>
+        <li data-icon="facebook-sign">
+            <strong>facebook-sign</strong>
+            <small>class .facebook-sign</small>
+        </li>
+        <li data-icon="facebook">
+            <strong>facebook</strong>
+            <small>class .facebook</small>
+        </li>
+        <li data-icon="google-plus-sign">
+            <strong>google-plus-sign</strong>
+            <small>class .google-plus-sign</small>
+        </li>
+        <li data-icon="google-plus">
+            <strong>google-plus</strong>
+            <small>class .google-plus</small>
+        </li>
+        <li data-icon="linkedin-sign">
+            <strong>linkedin-sign</strong>
+            <small>class .linkedin-sign</small>
+        </li>
+        <li data-icon="linkedin">
+            <strong>linkedin</strong>
+            <small>class .linkedin</small>
+        </li>
+        <li data-icon="github-sign">
+            <strong>github-sign</strong>
+            <small>class .github-sign</small>
+        </li>
+        <li data-icon="github">
+            <strong>github</strong>
+            <small>class .github</small>
+        </li>
+        <li data-icon="github-alt">
+            <strong>github-alt</strong>
+            <small>class .github-alt</small>
+        </li>
+        <li data-icon="pinterest-sign">
+            <strong>pinterest-sign</strong>
+            <small>class .pinterest-sign</small>
+        </li>
+        <li data-icon="pinterest">
+            <strong>pinterest</strong>
+            <small>class .pinterest</small>
+        </li>
+        <li data-icon="phone-sign">
+            <strong>phone-sign</strong>
+            <small>class .phone-sign</small>
+        </li>
+        <li data-icon="phone">
+            <strong>phone</strong>
+            <small>class .phone</small>
+        </li>
+    </ul>
+</article>

example/app/articles/icon-symbol.html

@@ -0,0 +1,242 @@
+<article id="icon-symbol" class="list scroll">
+    <ul>
+        <li class="anchor theme">Basic</li>
+        <li data-icon="arrow-up">
+            <strong>arrow-up</strong>
+            <small>class .arrow-up</small>
+        </li>
+        <li data-icon="arrow-right">
+            <strong>arrow-right</strong>
+            <small>class .arrow-right</small>
+        </li>
+        <li data-icon="arrow-down">
+            <strong>arrow-down</strong>
+            <small>class .arrow-down</small>
+        </li>
+        <li data-icon="arrow-left">
+            <strong>arrow-left</strong>
+            <small>class .arrow-left</small>
+        </li>
+        <li data-icon="move">
+            <strong>move</strong>
+            <small>class .move</small>
+        </li>
+        <li data-icon="exchange">
+            <strong>exchange</strong>
+            <small>class .exchange</small>
+        </li>
+        <li data-icon="ok">
+            <strong>ok</strong>
+            <small>class .ok</small>
+        </li>
+        <li data-icon="remove">
+            <strong>remove</strong>
+            <small>class .remove</small>
+        </li>
+        <li data-icon="plus">
+            <strong>plus</strong>
+            <small>class .plus</small>
+        </li>
+        <li data-icon="minus">
+            <strong>minus</strong>
+            <small>class .minus</small>
+        </li>
+        <li data-icon="asterisk">
+            <strong>asterisk</strong>
+            <small>class .asterisk</small>
+        </li>
+        <li data-icon="download">
+            <strong>download</strong>
+            <small>class .download</small>
+        </li>
+        <li data-icon="upload">
+            <strong>upload</strong>
+            <small>class .upload</small>
+        </li>
+
+
+        <li class="anchor theme">Sign</li>
+        <li data-icon="warning-sign">
+            <strong>warning-sign</strong>
+            <small>class .warning-sign</small>
+        </li>
+        <li data-icon="plus-sign">
+            <strong>plus-sign</strong>
+            <small>class .plus-sign</small>
+        </li>
+        <li data-icon="minus-sign">
+            <strong>minus-sign</strong>
+            <small>class .minus-sign</small>
+        </li>
+        <li data-icon="remove-sign">
+            <strong>remove-sign</strong>
+            <small>class .remove-sign</small>
+        </li>
+        <li data-icon="ok-sign">
+            <strong>ok-sign</strong>
+            <small>class .ok-sign</small>
+        </li>
+        <li data-icon="question-sign">
+            <strong>question-sign</strong>
+            <small>class .question-sign</small>
+        </li>
+        <li data-icon="info-sign">
+            <strong>info-sign</strong>
+            <small>class .info-sign</small>
+        </li>
+        <li data-icon="exclamation-sign">
+            <strong>exclamation-sign</strong>
+            <small>class .exclamation-sign</small>
+        </li>
+        <li data-icon="up-sign">
+            <strong>up-sign</strong>
+            <small>class .up-sign</small>
+        </li>
+        <li data-icon="right-sign">
+            <strong>right-sign</strong>
+            <small>class .right-sign</small>
+        </li>
+        <li data-icon="down-sign">
+            <strong>down-sign</strong>
+            <small>class .down-sign</small>
+        </li>
+        <li data-icon="left-sign">
+            <strong>left-sign</strong>
+            <small>class .left-sign</small>
+        </li>
+
+
+        <li class="anchor theme">Circle</li>
+        <li data-icon="ok-circle">
+            <strong>ok-circle</strong>
+            <small>class .ok-circle</small>
+        </li>
+        <li data-icon="remove-circle">
+            <strong>remove-circle</strong>
+            <small>class .remove-circle</small>
+        </li>
+        <li data-icon="ban-circle">
+            <strong>ban-circle</strong>
+            <small>class .ban-circle</small>
+        </li>
+        <li data-icon="download-circle">
+            <strong>download-circle</strong>
+            <small>class .download-circle</small>
+        </li>
+        <li data-icon="upload-circle">
+            <strong>upload-circle</strong>
+            <small>class .upload-circle</small>
+        </li>
+        <li data-icon="play-circle">
+            <strong>play-circle</strong>
+            <small>class .play-circle</small>
+        </li>
+        <li data-icon="circle">
+            <strong>circle</strong>
+            <small>class .circle</small>
+        </li>
+        <li data-icon="circle-blank">
+            <strong>circle-blank</strong>
+            <small>class .circle-blank</small>
+        </li>
+
+
+        <li class="anchor theme">Chevron</li>
+        <li data-icon="chevron-up">
+            <strong>chevron-up</strong>
+            <small>class .chevron-up</small>
+        </li>
+        <li data-icon="chevron-right">
+            <strong>chevron-right</strong>
+            <small>class .chevron-right</small>
+        </li>
+        <li data-icon="chevron-down">
+            <strong>chevron-down</strong>
+            <small>class .chevron-down</small>
+        </li>
+        <li data-icon="chevron-left">
+            <strong>chevron-left</strong>
+            <small>class .glass</small>
+        </li>
+
+
+        <li class="anchor theme">Angle</li>
+        <li data-icon="caret-up">
+            <strong>caret-up</strong>
+            <small>class .caret-up</small>
+        </li>
+        <li data-icon="caret-right">
+            <strong>caret-right</strong>
+            <small>class .caret-right</small>
+        </li>
+        <li data-icon="caret-down">
+            <strong>caret-down</strong>
+            <small>class .caret-down</small>
+        </li>
+        <li data-icon="caret-left">
+            <strong>caret-left</strong>
+            <small>class .caret-left</small>
+        </li>
+        <li data-icon="caret-sort">
+            <strong>caret-sort</strong>
+            <small>class .caret-sort</small>
+        </li>
+        <li data-icon="caret-sort-down">
+            <strong>caret-sort-down</strong>
+            <small>class .caret-sort-down</small>
+        </li>
+        <li data-icon="caret-sort-up">
+            <strong>caret-sort-up</strong>
+            <small>class .caret-sort-up</small>
+        </li>
+
+
+        <li class="anchor theme">Angle</li>
+        <li data-icon="angle-up">
+            <strong>angle-up</strong>
+            <small>class .angle-up</small>
+        </li>
+        <li data-icon="angle-right">
+            <strong>angle-right</strong>
+            <small>class .angle-right</small>
+        </li>
+        <li data-icon="angle-down">
+            <strong>angle-down</strong>
+            <small>class .angle-down</small>
+        </li>
+        <li data-icon="angle-left">
+            <strong>angle-left</strong>
+            <small>class .angle-left</small>
+        </li>
+        <li data-icon="double-angle-up">
+            <strong>double-angle-up</strong>
+            <small>class .double-angle-up</small>
+        </li>
+        <li data-icon="double-angle-right">
+            <strong>double-angle-right</strong>
+            <small>class .double-angle-right</small>
+        </li>
+        <li data-icon="double-angle-down">
+            <strong>double-angle-down</strong>
+            <small>class .double-angle-down</small>
+        </li>
+        <li data-icon="double-angle-left">
+            <strong>double-angle-left</strong>
+            <small>class .double-angle-left</small>
+        </li>
+
+        <li class="anchor theme">Cloud</li>
+        <li data-icon="cloud">
+            <strong>cloud</strong>
+            <small>class .cloud</small>
+        </li>
+        <li data-icon="cloud-download">
+            <strong>cloud-download</strong>
+            <small>class .cloud-download</small>
+        </li>
+        <li data-icon="cloud-upload">
+            <strong>cloud-upload</strong>
+            <small>class .cloud-upload</small>
+        </li>
+    </ul>
+</article>

example/app/articles/icon-toolbar.html

@@ -0,0 +1,272 @@
+<article id="icon-toolbar" class="list scroll">
+    <ul>
+        <li class="anchor theme">Text</li>
+        <li data-icon="font">
+            <strong>font</strong>
+            <small>class .font</small>
+        </li>
+        <li data-icon="bold">
+            <strong>bold</strong>
+            <small>class .bold</small>
+        </li>
+        <li data-icon="italic">
+            <strong>italic</strong>
+            <small>class .italic</small>
+        </li>
+        <li data-icon="strikethrough">
+            <strong>strikethrough</strong>
+            <small>class .strikethrough</small>
+        </li>
+        <li data-icon="underline">
+            <strong>underline</strong>
+            <small>class .underline</small>
+        </li>
+        <li data-icon="text-height">
+            <strong>text-height</strong>
+            <small>class .text-height</small>
+        </li>
+        <li data-icon="text-width">
+            <strong>text-width</strong>
+            <small>class .text-width</small>
+        </li>
+        <li data-icon="adjust">
+            <strong>adjust</strong>
+            <small>class .adjust</small>
+        </li>
+        <li data-icon="tint">
+            <strong>tint</strong>
+            <small>class .tint</small>
+        </li>
+
+
+        <li class="anchor theme">Alignment</li>
+        <li data-icon="align-left">
+            <strong>align-left</strong>
+            <small>class .align-left</small>
+        </li>
+        <li data-icon="align-right">
+            <strong>align-right</strong>
+            <small>class .align-right</small>
+        </li>
+        <li data-icon="align-justify">
+            <strong>align-justify</strong>
+            <small>class .align-justify</small>
+        </li>
+        <li data-icon="indent-left">
+            <strong>indent-left</strong>
+            <small>class .indent-left</small>
+        </li>
+        <li data-icon="indent-right">
+            <strong>indent-right</strong>
+            <small>class .indent-right</small>
+        </li>
+
+
+        <li class="anchor theme">Elements</li>
+        <li data-icon="menu">
+            <strong>menu</strong>
+            <small>class .menu</small>
+        </li>
+        <li data-icon="grid">
+            <strong>grid</strong>
+            <small>class .grid</small>
+        </li>
+        <li data-icon="grid-large">
+            <strong>grid-large</strong>
+            <small>class .grid-large</small>
+        </li>
+        <li data-icon="list">
+            <strong>list</strong>
+            <small>class .list</small>
+        </li>
+        <li data-icon="list-th">
+            <strong>list-th</strong>
+            <small>class .list-th</small>
+        </li>
+        <li data-icon="list-ul">
+            <strong>list-ul</strong>
+            <small>class .list-ul</small>
+        </li>
+        <li data-icon="list-ol">
+            <strong>list-ol</strong>
+            <small>class .list-ol</small>
+        </li>
+        <li data-icon="list-alt">
+            <strong>list-alt</strong>
+            <small>class .list-alt</small>
+        </li>
+        <li data-icon="table">
+            <strong>table</strong>
+            <small>class .table</small>
+        </li>
+        <li data-icon="bar-chart">
+            <strong>bar-chart</strong>
+            <small>class .bar-chart</small>
+        </li>
+        <li data-icon="tasks">
+            <strong>tasks</strong>
+            <small>class .tasks</small>
+        </li>
+        <li data-icon="paper-clip">
+            <strong>paper-clip</strong>
+            <small>class .paper-clip</small>
+        </li>
+        <li data-icon="link">
+            <strong>link</strong>
+            <small>class .link</small>
+        </li>
+        <li data-icon="quote-left">
+            <strong>quote-left</strong>
+            <small>class .quote-left</small>
+        </li>
+        <li data-icon="quote-right">
+            <strong>quote-right</strong>
+            <small>class .quote-right</small>
+        </li>
+
+
+        <li class="anchor theme">View & Size</li>
+        <li data-icon="zoom-in">
+            <strong>zoom-in</strong>
+            <small>class .zoom-in</small>
+        </li>
+        <li data-icon="zoom-out">
+            <strong>zoom-out</strong>
+            <small>class .zoom-out</small>
+        </li>
+        <li data-icon="fullscreen">
+            <strong>fullscreen</strong>
+            <small>class .fullscreen</small>
+        </li>
+        <li data-icon="resize-full">
+            <strong>resize-full</strong>
+            <small>class .resize-full</small>
+        </li>
+        <li data-icon="resize-small">
+            <strong>resize-small</strong>
+            <small>class .resize-small</small>
+        </li>
+        <li data-icon="resize-vertical">
+            <strong>resize-vertical</strong>
+            <small>class .resize-vertical</small>
+        </li>
+        <li data-icon="resize-horizontal">
+            <strong>resize-horizontal</strong>
+            <small>class .resize-horizontal</small>
+        </li>
+
+
+        <li class="anchor theme">Editor</li>
+        <li data-icon="pencil">
+            <strong>pencil</strong>
+            <small>class .pencil</small>
+        </li>
+        <li data-icon="search">
+            <strong>search</strong>
+            <small>class .search</small>
+        </li>
+        <li data-icon="filter">
+            <strong>filter</strong>
+            <small>class .filter</small>
+        </li>
+        <li data-icon="trash">
+            <strong>trash</strong>
+            <small>class .trash</small>
+        </li>
+        <li data-icon="file">
+            <strong>file</strong>
+            <small>class .file</small>
+        </li>
+        <li data-icon="file-alt">
+            <strong>file-alt</strong>
+            <small>class .file-alt</small>
+        </li>
+        <li data-icon="folder-close">
+            <strong>folder-close</strong>
+            <small>class .folder-close</small>
+        </li>
+        <li data-icon="folder-close-alt">
+            <strong>folder-close-alt</strong>
+            <small>class .folder-close-alt</small>
+        </li>
+        <li data-icon="folder-open">
+            <strong>folder-open</strong>
+            <small>class .folder-open</small>
+        </li>
+        <li data-icon="folder-open-alt">
+            <strong>folder-open-alt</strong>
+            <small>class .folder-open-alt</small>
+        </li>
+        <li data-icon="cut">
+            <strong>cut</strong>
+            <small>class .cut</small>
+        </li>
+        <li data-icon="copy">
+            <strong>copy</strong>
+            <small>class .copy</small>
+        </li>
+        <li data-icon="paste">
+            <strong>paste</strong>
+            <small>class .paste</small>
+        </li>
+        <li data-icon="save">
+            <strong>save</strong>
+            <small>class .save</small>
+        </li>
+        <li data-icon="undo">
+            <strong>undo</strong>
+            <small>class .undo</small>
+        </li>
+        <li data-icon="repeat">
+            <strong>repeat</strong>
+            <small>class .repeat</small>
+        </li>
+        <li data-icon="refresh">
+            <strong>refresh</strong>
+            <small>class .refresh</small>
+        </li>
+        <li data-icon="magic">
+            <strong>magic</strong>
+            <small>class .magic</small>
+        </li>
+
+
+        <li class="anchor theme">Others</li>
+        <li data-icon="bookmark">
+            <strong>bookmark</strong>
+            <small>class .bookmark</small>
+        </li>
+        <li data-icon="bookmark-empty">
+            <strong>bookmark-empty</strong>
+            <small>class .bookmark-empty</small>
+        </li>
+        <li data-icon="check">
+            <strong>check</strong>
+            <small>class .check</small>
+        </li>
+        <li data-icon="check-empty">
+            <strong>check-empty</strong>
+            <small>class .check-empty</small>
+        </li>
+        <li data-icon="tag">
+            <strong>tag</strong>
+            <small>class .tag</small>
+        </li>
+        <li data-icon="tags">
+            <strong>tags</strong>
+            <small>class .tags</small>
+        </li>
+        <li data-icon="edit">
+            <strong>edit</strong>
+            <small>class .edit</small>
+        </li>
+        <li data-icon="share">
+            <strong>share</strong>
+            <small>class .share</small>
+        </li>
+        <li data-icon="external-link">
+            <strong>external-link</strong>
+            <small>class .external-link</small>
+        </li>
+    </ul>
+</article>

example/app/articles/icon.html

@@ -1,377 +0,0 @@
-<article id="icons" class="list scroll indented">
-    <ul>
-        <li data-icon="home">
-            <a href="#">
-                <strong>Home</strong>
-                <small>class .home</small>
-            </a>
-        </li>
-        <li data-icon="picture">
-            <a href="#">
-            <strong>picture</strong>
-            <small>class .picture</small>
-            </a>
-        </li>
-        <li data-icon="camera">
-            <a href="#">
-            <strong>camera</strong>
-            <small>class .camera</small>
-            </a>
-        </li>
-        <li data-icon="music">
-            <a href="#">
-            <strong>music</strong>
-            <small>class .music</small>
-            </a>
-        </li>
-        <li data-icon="broadcast">
-            <a href="#">
-            <strong>broadcast</strong>
-            <small>class .broadcast</small>
-            </a>
-        </li>
-        <li data-icon="microphone">
-            <a href="#">
-            <strong>microphone</strong>
-            <small>class .microphone</small>
-            </a>
-        </li>
-        <li data-icon="book">
-            <a href="#">
-            <strong>book</strong>
-            <small>class .book</small>
-            </a>
-        </li>
-        <li data-icon="folder">
-            <a href="#">
-            <strong>folder</strong>
-            <small>class .folder</small>
-            </a>
-        </li>
-        <li data-icon="tag">
-            <a href="#">
-            <strong>tag</strong>
-            <small>class .tag</small>
-            </a>
-        </li>
-        <li data-icon="ticket">
-            <a href="#">
-            <strong>ticket</strong>
-            <small>class .ticket</small>
-            </a>
-        </li>
-        <li data-icon="cart">
-            <a href="#">
-            <strong>cart</strong>
-            <small>class .cart</small>
-            </a>
-        </li>
-        <li data-icon="phone">
-            <a href="#">
-            <strong>phone</strong>
-            <small>class .p>one</small>
-            </a>
-        </li>
-        <li data-icon="address">
-            <a href="#">
-            <strong>address</strong>
-            <small>class .address</small>
-            </a>
-        </li>
-        <li data-icon="mail">
-            <a href="#">
-            <strong>mail</strong>
-            <small>class .mail</small>
-            </a>
-        </li>
-        <li data-icon="mail-open">
-            <a href="#">
-            <strong>mail-open</strong>
-            <small>class .mail-open</small>
-            </a>
-        </li>
-        <li data-icon="pushpin">
-            <a href="#">
-            <strong>pushpin</strong>
-            <small>class .pushpin</small>
-            </a>
-        </li>
-        <li data-icon="compass">
-            <a href="#">
-            <strong>compass</strong>
-            <small>class .compass</small>
-            </a>
-        </li>
-        <li data-icon="clock">
-            <a href="#">
-            <strong>clock</strong>
-            <small>class .clock</small>
-            </a>
-        </li>
-        <li data-icon="calendar">
-            <a href="#">
-            <strong>calendar</strong>
-            <small>class .calendar</small>
-            </a>
-        </li>
-        <li data-icon="mobile">
-            <a href="#">
-            <strong>mobile</strong>
-            <small>class .mobile</small>
-            </a>
-        </li>
-        <li data-icon="inbox">
-            <a href="#">
-            <strong>inbox</strong>
-            <small>class .inbox</small>
-            </a>
-        </li>
-        <li data-icon="inbox-full">
-            <a href="#">
-            <strong>inbox-full</strong>
-            <small>class .inbox-full</small>
-            </a>
-        </li>
-        <li data-icon="user">
-            <a href="#">
-            <strong>user</strong>
-            <small>class .user</small>
-            </a>
-        </li>
-        <li data-icon="users">
-            <a href="#">
-            <strong>users</strong>
-            <small>class .users</small>
-            </a>
-        </li>
-        <li data-icon="vcard">
-            <a href="#">
-            <strong>vcard</strong>
-            <small>class .vcard</small>
-            </a>
-        </li>
-        <li data-icon="chat">
-            <a href="#">
-            <strong>chat</strong>
-            <small>class .chat</small>
-            </a>
-        </li>
-        <li data-icon="message">
-            <a href="#">
-            <strong>message</strong>
-            <small>class .message</small>
-            </a>
-        </li>
-        <li data-icon="search">
-            <a href="#">
-            <strong>search</strong>
-            <small>class .search</small>
-            </a>
-        </li>
-        <li data-icon="pie">
-            <a href="#">
-            <strong>pie</strong>
-            <small>class .pie</small>
-            </a>
-        </li>
-        <li data-icon="bars">
-            <a href="#">
-            <strong>bars</strong>
-            <small>class .bars</small>
-            </a>
-        </li>
-        <li data-icon="remove">
-            <a href="#">
-            <strong>remove</strong>
-            <small>class .remove</small>
-            </a>
-        </li>
-        <li data-icon="grid">
-            <a href="#">
-            <strong>grid</strong>
-            <small>class .grid</small>
-            </a>
-        </li>
-        <li data-icon="menu">
-            <a href="#">
-            <strong>menu</strong>
-            <small>class .menu</small>
-            </a>
-        </li>
-        <li data-icon="cloud">
-            <a href="#">
-            <strong>cloud</strong>
-            <small>class .cloud</small>
-            </a>
-        </li>
-        <li data-icon="upload">
-            <a href="#">
-            <strong>upload</strong>
-            <small>class .upload</small>
-            </a>
-        </li>
-        <li data-icon="star">
-            <a href="#">
-            <strong>star</strong>
-            <small>class .star</small>
-            </a>
-        </li>
-        <li data-icon="star-full">
-            <a href="#">
-            <strong>star-full</strong>
-            <small>class .star-full</small>
-            </a>
-        </li>
-        <li data-icon="heart">
-            <a href="#">
-            <strong>heart</strong>
-            <small>class .heart</small>
-            </a>
-        </li>
-        <li data-icon="heart-full">
-            <a href="#">
-            <strong>heart-full</strong>
-            <small>class .heart-full</small>
-            </a>
-        </li>
-        <li data-icon="thumbs-up">
-            <a href="#">
-            <strong>thumbs-up</strong>
-            <small>class .thumbs-up</small>
-            </a>
-        </li>
-        <li data-icon="thumbs-down">
-            <a href="#">
-            <strong>thumbs-down</strong>
-            <small>class .thumbs-down</small>
-            </a>
-        </li>
-        <li data-icon="help">
-            <a href="#">
-            <strong>help</strong>
-            <small>class .help</small>
-            </a>
-        </li>
-        <li data-icon="warning">
-            <a href="#">
-            <strong>warning</strong>
-            <small>class .warning</small>
-            </a>
-        </li>
-        <li data-icon="info">
-            <a href="#">
-            <strong>info</strong>
-            <small>class .info</small>
-            </a>
-        </li>
-        <li data-icon="cancel">
-            <a href="#">
-            <strong>cancel</strong>
-            <small>class .cancel</small>
-            </a>
-        </li>
-        <li data-icon="check">
-            <a href="#">
-            <strong>check</strong>
-            <small>class .check</small>
-            </a>
-        </li>
-        <li data-icon="multiply">
-            <a href="#">
-            <strong>multiply</strong>
-            <small>class .multiply</small>
-            </a>
-        </li>
-        <li data-icon="plus">
-            <a href="#">
-            <strong>plus</strong>
-            <small>class .plus</small>
-            </a>
-        </li>
-        <li data-icon="minus">
-            <a href="#">
-            <strong>minus</strong>
-            <small>class .minus</small>
-            </a>
-        </li>
-        <li data-icon="left">
-            <a href="#">
-            <strong>left</strong>
-            <small>class .left</small>
-            </a>
-        </li>
-        <li data-icon="down">
-            <a href="#">
-            <strong>down</strong>
-            <small>class .down</small>
-            </a>
-        </li>
-        <li data-icon="right">
-            <a href="#">
-            <strong>right</strong>
-            <small>class .right</small>
-            </a>
-        </li>
-        <li data-icon="up">
-            <a href="#">
-            <strong>up</strong>
-            <small>class .up</small>
-            </a>
-        </li>
-        <li data-icon="refresh">
-            <a href="#">
-            <strong>refresh</strong>
-            <small>class .refresh</small>
-            </a>
-        </li>
-        <li data-icon="share">
-            <a href="#">
-            <strong>share</strong>
-            <small>class .share</small>
-            </a>
-        </li>
-        <li data-icon="settings">
-            <a href="#">
-            <strong>settings</strong>
-            <small>class .settings</small>
-            </a>
-        </li>
-        <li data-icon="accessibility">
-            <a href="#">
-            <strong>accessibility</strong>
-            <small>class .accessibility</small>
-            </a>
-        </li>
-        <li data-icon="pencil">
-            <a href="#">
-            <strong>pencil</strong>
-            <small>class .pencil</small>
-            </a>
-        </li>
-        <li data-icon="file">
-            <a href="#">
-            <strong>file</strong>
-            <small>class .file</small>
-            </a>
-        </li>
-        <li data-icon="lock">
-            <a href="#">
-            <strong>lock</strong>
-            <small>class .lock</small>
-            </a>
-        </li>
-        <li data-icon="map">
-            <a href="#">
-            <strong>map</strong>
-            <small>class .map</small>
-            </a>
-        </li>
-        <li data-icon="eye">
-            <a href="#">
-            <strong>eye</strong>
-            <small>class .eye</small>
-            </a>
-        </li>
-    </ul>
-</article>
-

example/app/asides/features.html

@@ -48,8 +48,8 @@
             </li>
 
             <!-- Icons -->
-            <li data-view-article="icons" data-async="app/articles/icon.html">
-                <div class="tag right">109</div>
+            <li data-view-article="icon-symbol" data-async="app/articles/icon-symbol.html">
+                <div class="tag right">+250</div>
                 <strong>Icons</strong>
             </li>
 

example/app/sections/layout.html

@@ -21,8 +21,8 @@
         <nav>
             <a href="#" data-view-article="layout-art1" data-icon="home" class="active"></a>
             <a href="#" data-view-article="layout-art2" data-icon="inbox" data-count="80"></a>
-            <a href="#" data-view-article="layout-art3" data-icon="compass"></a>
-            <a href="#" data-view-article="layout-art4" data-icon="settings"></a>
+            <a href="#" data-view-article="layout-art3" data-icon="comments"></a>
+            <a href="#" data-view-article="layout-art4" data-icon="cog"></a>
         </nav>
     </footer>
 </section>

example/index.html

@@ -47,9 +47,7 @@
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
     <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.css">
-    <link rel="stylesheet" href="components/lungo.brownie/lungo.icon.brand.css">
     <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
-
     <link rel="stylesheet" href="components/lungo.brownie/theme.lungo.css" id="theme-stylesheet">
 
     <!-- App Stylesheet -->
@@ -58,8 +56,6 @@
 
 <body class="app">
 
-
-
     <section id="main" data-transition="" data-aside="features" class="drag">
         <header>
             <nav>
@@ -80,9 +76,12 @@
             </nav>
         </header>
 
-        <nav data-control="groupbar" data-article="icons icons-brands">
-            <a href="#" data-view-article="icons" data-label="Normal" data-count="72"></a>
-            <a href="#" data-view-article="icons-brands" data-label="Brands" data-count="37" data-async="app/articles/icon-brand.html" ></a>
+        <nav data-control="groupbar" data-article="icon-symbol icon-media icon-toolbar icon-social icon-item">
+            <a href="#" data-view-article="icon-symbol" data-label="Symbol" data-async="app/articles/icon-symbol.html"></a>
+            <a href="#" data-view-article="icon-media" data-label="Media" data-async="app/articles/icon-media.html"></a>
+            <a href="#" data-view-article="icon-toolbar" data-label="Toolbar" data-async="app/articles/icon-toolbar.html"></a>
+            <a href="#" data-view-article="icon-social" data-label="Social"  data-async="app/articles/icon-social.html"></a>
+            <a href="#" data-view-article="icon-item" data-label="Item" data-async="app/articles/icon-item.html"></a>
         </nav>
 
         <nav data-control="groupbar" data-article="list list-indented list-examples">

src/stylesheets/lungo.widgets.styl

@@ -57,7 +57,7 @@
 .tag
   display: inline-block
   padding: 0 3px
-  font-size: FONT_SIZE_TINY !important
+  font-size: FONT_SIZE_TINY
   line-height: 1.25em
   height: 1.35em
   text-align: center