Search code examples
htmltwitter-bootstrapglyphicons

Glyphicon and Button Text should be side by side

I am trying to place a glyphicon inside a button control but the button text and glyphicon don't come in the same line. The button text comes slightly below and is not parallel with the glyphicon

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
    <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
    My Button Text
</button>
Solution

  • there should be vertical-align: middle; to glyphicon span where you have placed inline CSS

    <button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
       <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px; vertical-align: middle;" aria-hidden="true"></span>
       My Button Text
</button>

    That's it :)