<p dir="auto">the responsive utilities class .vislble-* always use display: block that mess with something display: inline-block.</p>
<p dir="auto">for example<br>
i use glyphicon <span></span> to display eye open only on large desktop monitor.<br>
the visible-* change display: to block instead of inline-block.</p>
<p dir="auto">please use visibility: instead that it doesn't mess with display: style.</p>
<p dir="auto">Using a couple Facebook-like links in my navbar</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/6cabc9d4f1d85da3d4e6316ee1fc4edec9dfed5d6e86d680c75b4889652df390/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3332303439342f313030343939302f31356631383634382d306161652d313165332d393634382d6637306633646361646436382e504e47"><img src="https://camo.githubusercontent.com/6cabc9d4f1d85da3d4e6316ee1fc4edec9dfed5d6e86d680c75b4889652df390/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3332303439342f313030343939302f31356631383634382d306161652d313165332d393634382d6637306633646361646436382e504e47" alt="grab 2013-08-21 a 6 05 52 pm" data-canonical-src="https://f.cloud.github.com/assets/320494/1004990/15f18648-0aae-11e3-9648-f70f3dcadd68.PNG" style="max-width: 100%;"></a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;ul class=&quot;navbar-right nav navbar-nav&quot;&gt;
    &lt;li&gt;
        &lt;a href=&quot;#&quot;&gt; 
            &lt;span class=&quot;glyphicon glyphicon-shopping-cart&quot;&gt;&amp;nbsp;&lt;/span&gt;
            &lt;span class=&quot;visible-xs visible-sm&quot;&gt;Shopping Cart&lt;/span&gt;
            &lt;span class=&quot;badge&quot;&gt;3&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href=&quot;messages.html&quot;&gt; 
            &lt;span class=&quot;glyphicon glyphicon-envelope&quot;&gt;&amp;nbsp;&lt;/span&gt;
            &lt;span class=&quot;visible-xs visible-sm&quot;&gt;Messages&lt;/span&gt;
            &lt;span class=&quot;badge&quot;&gt;10&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;"><pre class="notranslate"><code class="notranslate">&lt;ul class="navbar-right nav navbar-nav"&gt;
    &lt;li&gt;
        &lt;a href="#"&gt; 
            &lt;span class="glyphicon glyphicon-shopping-cart"&gt;&amp;nbsp;&lt;/span&gt;
            &lt;span class="visible-xs visible-sm"&gt;Shopping Cart&lt;/span&gt;
            &lt;span class="badge"&gt;3&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a href="messages.html"&gt; 
            &lt;span class="glyphicon glyphicon-envelope"&gt;&amp;nbsp;&lt;/span&gt;
            &lt;span class="visible-xs visible-sm"&gt;Messages&lt;/span&gt;
            &lt;span class="badge"&gt;10&lt;/span&gt;
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre></div>
<p dir="auto">In the responsive menu they appear as such:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/2f58cd3768e37e719343b3adb8e72a54713d547dc4253883bc627637d4d6cb70/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3332303439342f313030343939352f34346232323235382d306161652d313165332d393961342d3731303131373965633261612e504e47"><img src="https://camo.githubusercontent.com/2f58cd3768e37e719343b3adb8e72a54713d547dc4253883bc627637d4d6cb70/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f3332303439342f313030343939352f34346232323235382d306161652d313165332d393961342d3731303131373965633261612e504e47" alt="grab 2013-08-21 a 6 06 01 pm" data-canonical-src="https://f.cloud.github.com/assets/320494/1004995/44b22258-0aae-11e3-99a4-7101179ec2aa.PNG" style="max-width: 100%;"></a></p>