Align font awesome icon baseline in flex container-CodePudding

I have a heading with two badges with some information about the sections. One of them contains a font awesome icon, causing the align-items: baseline; of that whole badge to fail: the badge is a few pixels lower than it should be. If I move the icon to the end of the badge or if I place something in front of it (like  ), the problem resolves, but the icon needs to be the first thing in the badge. Wrapping it in a div does not work. See the snippet for the live example.

Why does Font-awesome (or rather the <i> tag) not comply with align-items: baseline; like the rest of the tag? How can this be resolved in css?

h3 {
  align-items: baseline !important;
  display: flex !important;
  font-family: sans-serif;
  font-size: 1.75rem;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
}

.badge {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  align-items: center !important;
  border-radius: 9999px;
  white-space: nowrap;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  text-align: center;
  font-weight: 700;
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-bg-opacity: 1;
  background-color: rgb(252 210 143 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(119 48 0 / var(--tw-text-opacity));
  margin-left: .5rem !important;
  display: inline-flex !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<h3 >
  Flights
  <span >
    29
  </span>
  <span >
    <i  style="margin-right: .5rem !important;"></i>3:28
  </span>
  <span >
    3:28<i  style="margin-left: .5rem;"></i>
  </span>
</h3>

CodePudding user response：

You can set display:inline-block to select the last baseline instead of first from icon.

Why don't you just align them in center ? Also if I possible avoid ussing !important

h3 {
  align-items: center;
  display: flex !important;
  font-family: sans-serif;
  font-size: 1.75rem;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
}

.badge {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  align-items: center !important;
  border-radius: 9999px;
  white-space: nowrap;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  text-align: center;
  font-weight: 700;
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-bg-opacity: 1;
  background-color: rgb(252 210 143 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(119 48 0 / var(--tw-text-opacity));
  margin-left: .5rem !important;
  display: inline-flex !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<h3 >
  Flights
  <span >
    29
  </span>
  <span >
    <i  style="margin-right: .5rem !important;"></i>3:28
  </span>
  <span >
    3:28<i  style="margin-left: .5rem;"></i>
  </span>
</h3>

CodePudding user response：

Font awesome icons are actually characters(text) with special glyphs. The issue is happening because of the difference in font sizes. The icons(characters) have 13.5px and the brown text has 18px font size. Although they look same size but the font sizes are different.
If you put icons, with small size, first then their baseline gets aligned with parent containers baseline. And rest of the brown text is centered as per the .badge CSS rule.
You can fix it like this:

h3 {
  align-items: baseline !important;
  display: flex !important;
  font-family: sans-serif;
  font-size: 1.75rem;
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-top: 0;
}

.badge {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  align-items: baseline !important; /* <-- change */
  border-radius: 9999px;
  white-space: nowrap;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  text-align: center;
  font-weight: 700;
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --tw-bg-opacity: 1;
  background-color: rgb(252 210 143 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(119 48 0 / var(--tw-text-opacity));
  margin-left: .5rem !important;
  display: inline-flex !important;
}

.badge > i {  /* <--- new rule */
  align-self:center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<h3 >
  Flights
  <span >
    29
  </span>
  <span >
    <i  style="margin-right: .5rem !important;"></i>3:28
  </span>
  <span >
    3:28<i  style="margin-left: .5rem;"></i>
  </span>
</h3>

I've made only two changes:

.badge {
  ...
  align-items: baseline !important;
}

.badge > i {
  align-self: center;
}