Pete Talks Web Pete Talks Web - 3 months ago 11
CSS Question

Fort Awesome Icon Bigger Than Browser Expects

Using Fort Awesome Icons.

When one of my icons renders, it looks like the browser expects the height to be 90px, but the icon is actually taller, and this causes it to overlap other content that I have.

<script src="https://use.fortawesome.com/66d3880d.js"></script>
<br />
<hr />
<i class="fa fa-5x fa-day-sunny-overcast" />


Here is a codepen demonstrating the issue

Anyone know how to fix this?

Answer

here's a less hacky work around

.fa-day-sunny-overcast::before {
  font-size:0.88em;
}