Glyphicon and Button Text should be side by side

Question

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>

Answer 1

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 :)

Answer 2

You can use bootstrap grid system and css like following:

<button type="button" class="btn btn-default" aria-label="my button" style="border: 0px">
    <div class="col-md-2">
       <span class="glyphicon glyphicon-plus-sign" style="color:#a0a0a0; font-size: 30px" aria-hidden="true"></span>
    </div>
   <div class="col-md-10" style="padding-top:5px;  margin-left: -4px">
   My Button Text
   </div>
</button>