Search code examples
htmlcssfontsfont-face

CSS & Entypo font not playing nicely


I've run out of options with this particular issue I'm having.

I'm using entypo font to display a few icons but their dimensions all seem out of whack and I can't seem to control or modify them enough to get the desired result.

All I want is:

Email Icon : Email me [email protected]

I've tried normal inline elements, then I placed them in divs to try and force them and then I resorted to putting them in a table(exasperation) but still no joy.

Would someone mind have a look this this fiddle and seeing if they can see what the fix might be?

Links must be accompanied by code?

http://jsfiddle.net/KafdH/

Many thanks!

Apologis for some of the css, it may seem illogical, I was trying all sorts of wild wacky things. It's almost as though the icon has a large invisible space above it.


Solution

  • I'm not sure if the fiddle will save, but: http://jsfiddle.net/KafdH/2/ seems to bring it up for me. Your "h4" was forcing too much white space, I think. I tried bold, instead, and the font looked the same. I also had to put the entire line in the span, though I hope with more real estate that won't be necessary.

    <span id="entypoFont" class="mail icon"> <b> Email me:</b>      
    [email protected]</span>
    <span id="entypoFont" class="mail icon">
                  <b> Email me:</b>
                   [email protected]</span>