border: 1px solid #ccc;
<span class='my-icon icon-file-text'></span>
<span class='my-text'>Hello World</span>
<span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
<span class="my-text">hello world</span>
do not play with the vertical-align of your text
play with the vertical align of the font-awesome icon
Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).
I updated your jsfiddle for how I would do it. I used font-size for the icon instead of using the 2x. jsfiddle.net/3GMjp/1
If it were up to me however, I would not use the icon-2x. And simply specify the font-size myself, as in the following
In your first piece of code the <span> start tag does not correspond with the ending </i> tag.
Of course you could not use inline styles and target it with your own css class. But this works in a copy paste fashion.
yes, this is a better solution, thanks. Still seems to require line-height though jsfiddle.net/paulftw/F3KyK/41