Icon font - icon height bigger than expected

Question

I'm using an icon font generated by fontastic.me in my project. However, all icons are a little bit higher as expected.

Snippet here:

.icon-camera {
  font-size: 40px;
  background: #ff0000;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">
</head>
<body>
  <span class="icon-camera"></span>
</body>
</html>

What can cause this effect, and how can I get rid of it?

Andrew Dotson · Answer 1 · 2016-06-06T19:30:23.600

20

Font Awesome has developed a solution to deal with this issue. I mirrored their solution by creating a new class called ".icon" in my font.css file. It seems to work well with Fontastic too.(Make sure you add your font where I have "your-icon-font-here").

.icon {
    display: inline-block;
    font: normal normal normal 14px/1 "your-icon-font-here";
    font-size: inherit;
 }

<i class="icon icon-tag"></i>

edited Jun 06 '16 at 19:30

answered Jun 06 '16 at 19:21

Andrew Dotson

311
2
6

3

OP please accept this answer! This is the only thing on the internet that solves this mind boggling issue! – CodingMeSwiftly Jun 20 '17 at 01:15
3

@Andrew Dotson ... You are a hero of the internet. Thank you. – Tom Aug 03 '18 at 13:03

score 4 · Answer 2 · answered Sep 27 '14 at 14:39

It’s a line height issue. Unclear about other glyphs in the character set, but using your example this CSS—which uses line-height: 50%;, display: inline-block; and position: relative; seems to work. My only concern is the line-height: 50%; is truly only for the example you are showing. So glyphs of different heights might just need other values. But experiment to see if this works for you or if the concept reveals a more flexible solution.

.icon-camera {
  font-size: 40px;
  background: #ff0000;
  line-height: 50%;
  display: inline-block;
  position: relative;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">
</head>
<body>
  <span class="icon-camera"></span>
</body>
</html>

score 2 · Answer 3 · edited Sep 27 '14 at 22:28

If you wanna do what im going to tell you, then you should make icons.css file offline. I mean not referencing in <link rel= ... and using it between <style></style> in the head part. In the file:

https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css

You can see this code:

@font-face {
  font-family: "app-icons";
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot");
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot?#iefix") format("embedded-opentype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.woff") format("woff"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.ttf") format("truetype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.svg#1411745016") format("svg");
  font-weight: normal;
  font-style: normal;
}

You should add this font-size:small That should look like this:

@font-face {
  font-family: "app-icons";
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot");
  src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot?#iefix") format("embedded-opentype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.woff") format("woff"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.ttf") format("truetype"),
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.svg#1411745016") format("svg");
  font-weight: normal;
  font-style: normal;
  font-size: small;
}

score 1 · Answer 4 · answered Dec 10 '18 at 10:30

.icon-camera {
  display: inline-block; /* add line */
  line-height: 1; /* add line */
  font-size: 40px;
  background: #ff0000;
}
.icon-camera:before {
  display: inline-block; /* add line */
  vertical-align: top; /* add line. maybe it's not necessary */
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet">
</head>
<body>
  <span class="icon-camera"></span>
</body>
</html>

Icon font - icon height bigger than expected

4 Answers4