1

I have two font icons in the (Bootstrap) navbar, a menu icon and a search icon:

<div class="menu-icon">
    <i class="fa fa-bars"></i>
</div>
<div class="navbar-brand">
    Website
</div>
<div class="search-icon">
    <i class="fa fa-search"></i>
</div>

CSS:

.menu-icon {
    float: left;
}

.search-icon {
    float: right;
}

.menu-icon, .search-icon {
    font-size: 1.6em;
    padding: .6em 1em;
    cursor: pointer;
    background: #f55;
}

This works well on one browser but not on others because they have their own different sizes of font, which can also be changed in their settings.

This difference of size across different browsers require different padding or font-size. Which is clearly visible if you set a background color for them.

How can I avoid this font difference?

Slim Shady
  • 354
  • 2
  • 3
  • 13
  • Which browsers have you tested? – Lukas A Apr 11 '17 at 09:58
  • I've test the styles but can't find the difference ;-). Are there some more styles which affect your original style? Do you have a Fiddle or link? – dutchsociety Apr 11 '17 at 10:03
  • @LukasA Well, I've tested CM Browser and the default browser on my phone then I tried Chrome on my laptop (I know, why is there a menu icon on a laptop?). All of them had different font sizes. – Slim Shady Apr 11 '17 at 10:05
  • I would check you are not zoomed in, on a phone the font will look bigger, you could use a PHP sniffer to check for mobile then change the font if it is one – Lewis Smith Apr 11 '17 at 10:06
  • http://stackoverflow.com/questions/19918286/how-to-set-a-fixed-font-size-prevent-browser-scaling-for-a-specific-single-elem plus I would go with an absolute unit rather than a relative one (if you do not want to allow for size changes) – Pete Apr 11 '17 at 10:07
  • @dutchsociety No, just this. When I changed the default font size (labeled as "Normal") to "Small" in CM Browser, that also gave me different results. – Slim Shady Apr 11 '17 at 10:10
  • @SlimShady you should never use Small or Normal or even Bold, you know why? Every font or engine does rendering the font like how to want to. If you defined your fonts like the 100, 300, 500, 700 or higher way it should be okay because then you use the exactly weights. – dutchsociety Apr 11 '17 at 10:13

2 Answers2

1

I would use background-image icons instead of font icons, if possible, to avoid the font sizing issue.

Stephen Lane
  • 132
  • 8
  • Yep, that should work but how about search icon? I guess the problem is from the navbar. Bootstrap set the height of the navbar to about 50px and that may be why the height doesn't decrease with the font. – Slim Shady Apr 11 '17 at 11:41
0

if you have not already, try specifying the font-size of your body element in %, eg.:

body {
  font-size: 100%;
}

The em size that you set, refer to this value, which might not be the same in every browser unless you specify it. If you do, your em values should be consistent in all browsers.

There is a nice article about this (as well as line heights) here: https://alistapart.com/article/howtosizetextincss

Does this solve your problem?

MikkelTN
  • 26
  • 3