CODEWITHSUNDEEP
fontscssglyph
Tamás Pap
Tamás Pap

Reputation: 18273

Icon font - icon height bigger than expected

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?

Upvotes: 10

Views: 9016

Answers (4)

Mo Jingzhi
Mo Jingzhi

Reputation: 11

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

Upvotes: 1

Andrew Dotson
Andrew Dotson

Reputation: 321

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>

Upvotes: 21

HatchU
HatchU

Reputation: 21

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

Upvotes: 2

Giacomo1968
Giacomo1968

Reputation: 26066

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>

Upvotes: 4

Related Questions