Icon font - icon height bigger than expected

Asked 27/9, 2014 at 14:32 Answered 10/12, 2018 at 10:30

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?

Idelson answered 27/9, 2014 at 14:32 Comment(0)

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>

Turbot answered 6/6, 2016 at 19:21 Comment(2)

OP please accept this answer! This is the only thing on the internet that solves this mind boggling issue! – Ketose 20/6, 2017 at 1:15

@Andrew Dotson ... You are a hero of the internet. Thank you. – Indies 3/8, 2018 at 13:3

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>

Immolate answered 27/9, 2014 at 14:39 Comment(0)

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;
}

Melia answered 27/9, 2014 at 14:41 Comment(0)

.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>

Brigandine answered 10/12, 2018 at 10:30 Comment(0)

Recommended topics

Hot tags