title: Bootstrap button: left icon and centered text
body: <p>I need to generate a button (not a group of buttons) with the following structure:</p>
  
  <p>left-side: [glyphicon]
  center: Text</p>
  
  <p>example: <a href="https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png">https://www.dropbox.com/s/3idura8mxf4gekj/call_me.png</a></p>
  
  <p>Here is what I did:</p>
  
  <pre><code>&lt;div class="row btn-custom"&gt;
          &lt;div class="btn-group btn-group-lg col-xs-12" &gt;
            &lt;button class="btn btn-success col-xs-1"&gt;&lt;span class="glyphicon glyphicon-earphone"&gt;&lt;/span&gt;&lt;/button&gt;
            &lt;button class="btn btn-success col-xs-10"&gt;Call Us&lt;/button&gt;
            &lt;button class="btn btn-success col-xs-1"&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.btn-custom {
      margin-bottom: 5px; 
  }
  
  .btn-custom button { 
      border-left:none; 
      height: 50px;
  }
  </code></pre>
  
  <p>The problem that on a very small screen they start to stack up and don't look like one button. is there any better way to achieve this?</p>
  
  <ul>
  <li>this code is intended to be used only on a mobile site (m.* url) so please do not recommend me to do other stuff, i know what i am doing.</li>
  </ul>
  
  <p>Thanks!!!</p>