Rename icon classes to match chat states

fonticons/style.css

@@ -28,7 +28,7 @@ Instead of a list of all class selectors,
 you can use the generic selector below, but it's slower:
 [class*="icon-"] {
 */
-.icon-home, .icon-pencil, .icon-camera, .icon-camera-2, .icon-play, .icon-music, .icon-headphones, .icon-phone, .icon-phone-hang-up, .icon-address-book, .icon-notebook, .icon-envelop, .icon-pushpin, .icon-bubble, .icon-bubble-2, .icon-bubbles, .icon-bubbles-2, .icon-bubbles-3, .icon-user, .icon-users, .icon-quotes-left, .icon-spinner, .icon-search, .icon-cogs, .icon-wrench, .icon-unlocked, .icon-lock, .icon-lock-2, .icon-key, .icon-key-2, .icon-zoom-out, .icon-zoom-in, .icon-cog, .icon-remove, .icon-remove-2, .icon-eye, .icon-eye-blocked, .icon-attachment, .icon-globe, .icon-heart, .icon-happy, .icon-thumbs-up, .icon-smiley, .icon-tongue, .icon-sad, .icon-wink, .icon-wondering, .icon-confused, .icon-shocked, .icon-evil, .icon-angry, .icon-cool, .icon-grin, .icon-info, .icon-notification, .icon-warning, .icon-spell-check, .icon-volume-high, .icon-volume-medium, .icon-volume-low, .icon-volume-mute, .icon-volume-mute-2, .icon-volume-decrease, .icon-volume-increase, .icon-bold, .icon-underline, .icon-italic, .icon-strikethrough, .icon-new-tab, .icon-youtube, .icon-close, .icon-blocked, .icon-cancel-circle, .icon-minus, .icon-plus, .icon-checkbox-checked, .icon-checkbox-unchecked, .icon-checkbox-partial, .icon-radio-checked, .icon-radio-unchecked, .icon-info-2, .icon-newspaper, .icon-image, .icon-offline, .icon-busy {
+.icon-home, .icon-pencil, .icon-camera, .icon-camera-2, .icon-play, .icon-music, .icon-headphones, .icon-phone, .icon-phone-hang-up, .icon-address-book, .icon-notebook, .icon-envelop, .icon-pushpin, .icon-online, .icon-away, .icon-bubbles, .icon-bubbles-2, .icon-bubbles-3, .icon-user, .icon-users, .icon-quotes-left, .icon-spinner, .icon-search, .icon-cogs, .icon-wrench, .icon-unlocked, .icon-lock, .icon-lock-2, .icon-key, .icon-key-2, .icon-zoom-out, .icon-zoom-in, .icon-cog, .icon-remove, .icon-remove-2, .icon-eye, .icon-eye-blocked, .icon-attachment, .icon-globe, .icon-heart, .icon-happy, .icon-thumbs-up, .icon-smiley, .icon-tongue, .icon-sad, .icon-wink, .icon-wondering, .icon-confused, .icon-shocked, .icon-evil, .icon-angry, .icon-cool, .icon-grin, .icon-info, .icon-notification, .icon-warning, .icon-spell-check, .icon-volume-high, .icon-volume-medium, .icon-volume-low, .icon-volume-mute, .icon-volume-mute-2, .icon-volume-decrease, .icon-volume-increase, .icon-bold, .icon-underline, .icon-italic, .icon-strikethrough, .icon-new-tab, .icon-youtube, .icon-close, .icon-blocked, .icon-cancel-circle, .icon-minus, .icon-plus, .icon-checkbox-checked, .icon-checkbox-unchecked, .icon-checkbox-partial, .icon-radio-checked, .icon-radio-unchecked, .icon-info-2, .icon-newspaper, .icon-image, .icon-offline, .icon-dnd {
 	font-family: 'Converse-js';
 	speak: none;
 	font-style: normal;
@@ -77,10 +77,10 @@ you can use the generic selector below, but it's slower:
 .icon-pushpin:before {
 	content: "\e012";
 }
-.icon-bubble:before {
+.icon-online:before {
 	content: "\25fc";
 }
-.icon-bubble-2:before {
+.icon-away:before {
 	content: "\25fb";
 }
 .icon-bubbles:before {
@@ -290,6 +290,6 @@ you can use the generic selector below, but it's slower:
 .icon-offline:before {
 	content: "\e002";
 }
-.icon-busy:before {
+.icon-dnd:before {
 	content: "\e004";
 }

mockup.html

@@ -52,7 +52,7 @@
                     <span id="xmpp-status-holder">
                     <dl id="target" class="dropdown">
                         <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
-                            <span class="icon-bubble"></span>
+                            <span class="icon-online"></span>
                             <div class="xmpp-status">
                                 <a class="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">I am online</a>
                                 <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
@@ -62,17 +62,17 @@
                             <ul style="display: none;" class="xmpp-status-menu">
                                 <li>
                                     <a href="#" class="online" data-value="online">
-                                    <span class="icon-bubble"></span>
+                                    <span class="icon-online"></span>
                                     Online</a>
                                 </li>
                                 <li>
                                     <a href="#" class="dnd" data-value="dnd">
-                                    <span class="icon-busy"></span>
+                                    <span class="icon-dnd"></span>
                                     Busy</a>
                                 </li>
                                 <li>
                                     <a href="#" class="away" data-value="away">
-                                    <span class="icon-bubble-2"></span>
+                                    <span class="icon-away"></span>
                                     Away</a>
                                 </li>
                                 <li>
@@ -108,19 +108,19 @@
                     <dt id="xmpp-contacts" style="display: block;">My contacts</dt>
                     <dd class="online current-xmpp-contact">
                         <a class="open-chat" title="Click to chat with this contact" href="#">
-                        <span class="icon-bubble" title="This contact is online"></span>
+                        <span class="icon-online" title="This contact is online"></span>
                         John Smit</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                     <dd class="dnd current-xmpp-contact">
                         <a class="open-chat" title="Click to chat with this contact" href="#">
-                        <span class="icon-bubble-2" title="this contact is away"></span>
+                        <span class="icon-away" title="this contact is away"></span>
                         Francois Pienaar</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>
                     <dd class="busy current-xmpp-contact">
                         <a class="open-chat" title="Click to chat with this contact" href="#">
-                        <span class="icon-busy" title="This contact is busy"></span>
+                        <span class="icon-dnd" title="This contact is busy"></span>
                         Gary Teichmann</a>
                         <a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
                     </dd>