CODEWITHSUNDEEP
css
Adam
Adam

Reputation: 1459

Inconsistent icon font spacing throughout browsers/os

I am having a lot of trouble vertically aligning an entypo icon font.

Here is the codepen which currently displays as intended on Safari and Chrome on mac - http://codepen.io/anon/pen/jJtwz

As you can see the right arrow is vertically centred. Now the problem browsers...

Mac Firefox - The arrow is slightly lower but can tolerate this

It appears too low on the following browsers... (Every PC browser)

Mac Opera PC Chrome PC Firefox PC IE 10 PC IE 9

All the PC browsers seem to be resolved by adding a line-height:5px and getting rid of the top value.

Has anyone experienced the line height inconsistencies between browsers with icon fonts and know of a fix? It seems the OS has something to do with this as opposed to just browser inconsistencies.

I have tried all sorts of tricks like negative margins, absolute/relative positioning but cannot get consistent results.

Thanks

P.S. This was tested on all latest versions of browsers on the latest Mac OS and Windows 8

Here is the code if you cant view the link...

HTML 

<section class="hbox hshop cfix">
  <img src="http://placekitten.com/g/600/400">
  <h3>Clothing</h3>
</section>

CSS

.hshop > a {
display: block;
border: 1px solid #ccc;
}

.hshop > a >img {
vertical-align: bottom;
padding: 0.75em 0.75em 0;
}

.hshop > a > h3 {
padding: 0.5em 0.6em;
position: relative;
font-weight: normal;
}

.hshop h3:after {
content: '\E766'; 
font-family: 'entypo';
position: absolute;
right: 0.3em;
font-size: 2em; 
top:3px;
}
img {max-width:100%}

Upvotes: 4

Views: 1689

Answers (3)

user1275652
user1275652

Reputation: 11

I fixed the font vertical space oiand made it available here https://github.com/zenx/entypo

Upvotes: 0

rgfx
rgfx

Reputation: 338

There are still inconsistencies in that entypo font. In all icon fonts.

The best solution I have found is set a baseline font size, and play around with you font metrics until you get something semi consistent Matching the base font metrics is a good start .This method works best if you keep the same size icon-font, changing the size throws everything off.

Also IE reacted better when I set the line-height a little smaller then the font size.

Really sloppy, but it got me close enough.

Upvotes: 0

Adam
Adam

Reputation: 1459

It was an entypo problem. The spacing around their glyphs was causing the issue. I used the icon fonts from fontello and this worked http://codepen.io/anon/pen/sidje

Upvotes: 1

Related Questions