Weird ::before "margin" on Flaticon UIcons

Issue

I am currently using Flaticon’s UIcons (using CDN) and I have this weird ::before margin thing. Here are some screenshots:

enter image description here enter image description here

Because of this, I can’t vertically align my icons properly and it looks weird when there is text next to the icon.

I have used other icons before like fontawesome and never experienced a similar issue.

Like I said I have tried some things like adding font-side: 0; to the parent container but nothing worked.

I tried removing padding and margin from the icon itself too (also tried removing it from the ::before) but it doesn’t always work. (for ex. when there is padding or margin on the parent).

This question is not the same issue. I have tried the suggested solutions there and nothing worked.

Solution

Referencing FontAwesome with the line-height and vertical-align and then adding display: inline-flex; so the ::before sits in the right place

body {
  font-family: sans-serif;
  margin: 0;
}

h1 {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}

#fixed {
  line-height: 0.5em;
  vertical-align: -0.15em;
  
  display: inline-flex;
}
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>

<h1>
<i class="fi fi-rr-hastag"></i> Not Aligned
</h1>

<h1>
<i id="fixed" class="fi fi-rr-hastag"></i> Aligned
</h1>

Answered By – Simp4Code

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published