Menu
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?
373
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With