Put icon inside link

converse.css

@@ -307,6 +307,10 @@ dl.add-converse-contact {
     height: 22px;
 }
 
+.fancy-dropdown a.choose-xmpp-status {
+    width: 155px;
+}
+
 .fancy-dropdown a.choose-xmpp-status,
 .fancy-dropdown a.toggle-xmpp-contact-form {
     text-shadow: 0 1px 0 rgba(255, 255, 255, 1);
@@ -320,9 +324,10 @@ dl.add-converse-contact {
    float: left; 
 }
 
-#fancy-xmpp-status-select span {
+.choose-xmpp-status span {
     padding-right: 5px; 
     padding-left: 5px; 
+    float: left;
 }
 
 #fancy-xmpp-status-select a.change-xmpp-status-message {

mockup.html

@@ -52,9 +52,11 @@
                     <span id="xmpp-status-holder">
                     <dl id="target" class="dropdown">
                         <dt id="fancy-xmpp-status-select" class="fancy-dropdown">
-                            <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="choose-xmpp-status online" data-value="I am online" href="#" title="Click to change your chat status">
+                                    <span class="icon-online"></span>
+                                    I am online
+                                </a>
                                 <a class="change-xmpp-status-message icon-pencil" href="#" title="Click here to write a custom status message"></a>
                             </div>
                         </dt>