JSFiddle - React, Tailwind, and code Playground

by kizu

HTML

Buttons:
<span class="Button">
    <img src="http://www.connectedtext.com/Image/ok.gif" />
    Small Icon
</span>


<span class="Button">
    <img src="http://cdn1.iconfinder.com/data/icons/glaze/48x48/actions/button_ok.png" />
    Large icon
</span>


<span class="Button">
    No Icon
</span>

Inline text

<br />
Thank you for trying.

CSS

span.Button {display:inline-block; margin:2px 4px;padding:3px 6px;
             background-color:#ddd; height:24px; line-height:24px;
             vertical-align:middle; 
             }


span.Button img {vertical-align:middle;margin:-100px 0;position:relative;top:-2px;}

/* ready to copy/paste:
  vertical-align:middle;
  position:relative;
  position:absolute;
  margin-top:-??%;
*/