FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.64k stars 12.19k forks source link

Bug: Kit Custom Icon `.fak` missing `line-height: 1;` in `.scss` and `.less` assets #20044

Open Cow258 opened 10 months ago

Cow258 commented 10 months ago

Bug description

The class .fak, .fa-kit are missing the line-height: 1;, that cause the font icon vertical height slightly off.

Reproducible test case

Just download it from Pro Plan Kit

Screenshots

image image image

Font Awesome version

v6.5.1

Serving

Kit, Self-hosted

Implementation

CSS

Browser and Operating System

Any browser and OS

Web bug report checklist

robmadole commented 10 months ago

@mlwilkerson I think we are missing the line-height. Do you recall any reason why we left this out when working on Kits?

mlwilkerson commented 10 months ago

@robmadole no, I don't recall any such reason. If it's missing, then I think it was just a mistake.

mlwilkerson commented 10 months ago

On closer examination, this issue is more specific, and more subtle. It's specific to SCSS and Less because of how line-height is handled differently in those assets.

The css/custom-icons.css does appear to have line-height: 1 in the .fak rule. As the screenshots above show in the original report, it's the custom-icons.scss asset that lacks line-height: 1 in its fak rule.

In other words, the reported problem is with the SCSS assets, not the CSS assets.

However, it might not be the case that there should be a line-height: 1 in the fak rule of custom-icons.scss.

Compare to the corresponding rules in official familyStyle assets, like the fas rule in solid.scss. It also lacks line-height: 1.

For the official familyStyles, however, there's a line-height: 1 being assigned in _core.scss (as shown in the screenshot above). And there's also something happening with line-height: 1 in _mixins.scss via the extension of the fa-icon mixin. But there's no entry for .fak, .fa-kit in _mixins.scss.

There's a similar (though not identical) pattern for the Less case. What's similar is that line-height: 1 comes from the fa-icon mixin via _mixins.less. What's different is that in _core.less, there's no line-height: 1 being assigned to the official familyStyles either. So they all get their line-height: 1 default from the rules in _mixins.less, and since there's no rule in _mixins.less for .fak,.fa-kit, it lacks the default line-height: 1 in the Less case as well.