Geek Answers Handbook

How to align the boot icon with the text button?

How to align the boot icon and image? (I use font-awsome for icons).

JSBIN: http://jsbin.com/uwupuz/2/edit

enter image description here

<div class="btn-group"> <a class="btn" href="#"> <i class="icon-plus"></i> <span>Add</span> </a> <a class="btn" href="#"> <i class="icon-trash"></i> <span>Remove</span> </a> <a class="btn" href="#"> <i class="icon-edit"></i> <span>Edit</span> </a> </div>
+6
source share
2 answers

Try the following: http://jsfiddle.net/jonschlinkert/CBss2/1/ Here is what it looks like after applying line-height: 1;

button screen cap

I would not bother with the position property, as suggested by @hajpoj, there are cleaner ways to fix a problem that will not have cascading effects later. Another problem with using position: relative is that each icon is actually slightly different in size. You want to try to keep the service in mind. It’s best to make it look as if it had been aligned to the bottom for most normal-sized icons, and when using a larger than average icon, it will align correctly with the text. Using position: relative , the larger icon will advance over the others and look toward the center.

+3
source

You can use the relative position.

 i { position: relative; bottom: 1px; // or however much you want to offset it by }

http://jsfiddle.net/hajpoj/ZdPGe/

0
source

More articles:


All Articles