Question

I need to get a link with an icon after a link.

For example:

Link [icon]

The line height I’d like is 30px. So, I have such a markup:

<div class="phone-support">
   <a href="#">We'll call you</a><i class="icon"></i>
</div>

.phone-support a {
   display       : inline-block;
   line-height   : 30px;
   padding-right : 5px;
   height        : 30px;
}

.phone-support i.icon {
   display       : inline-block;
   height        : 30px;
   width         : 30px;
   background    : url('/path/to/sprite.png') -10px -10px;
}

I considered it should work, but the height of .phone-support becomes 41px, but why? And elements aren’t aligned vertically. They simple stays each after each, why this happens?

P.S. My browser is Chromium 18. Don’t pay attention on that there is no ie-inline-block-fix, etc. CSS code is simplified just to point to the problem.

Answer 1

jsBin demo

Just put your <i> inside the <a>. The benefit? your image will be linkable.

<div class="phone-support">
   <a href="#">We'll call you  <i class="icon"></i> </a>
</div>

Than set a vertical-align:top; to set your image at the top of the <a> parent.

.phone-support i.icon {
     display       : inline-block;
     vertical-align: top;
     height        : 30px;
     width         : 30px;
     background    : url(your url here);
     margin-left   : 10px;  /*add some space*/
}