Fix content and line-height in SVG font icons #4578
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In commit 4d49ec8 we replaced an `@extend .fa-` clause with a `content: fa-content()` clause. With the `@extend` clause, the `content:` property appeared wherever the `.fa-` selector was defined, so we later overwrote it in our `%svg-icon` selector, which was defined later in the generated CSS. Defining the property with `content: fa-content()`, on the other hand, caused the `content:` property to appear wherever we used the mixin with `@include has-fa-icon`. That meant our `%svg-icon` selector would appear before it, and would not overwrite it. We could modify a few things and make the code more complicate in order to avoid that. In this case, however, it's easier to add an `!important` flag; after all, it is indeed important that SVG icons have no content so screen readers don't try to announce illegible characters.
We forgot to include this property when replacing our use of `%fa-icon`, and it was causing the admin menu to have a blank space at the bottom. So we're including it again to make sure nothing else breaks because of this omition.
javierm
changed the title
Senen
approved these changes
Jul 2, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
References
Background
In commit 4d49ec8 we replaced an
@extend .fa-clause with acontent: fa-content()clause.With the
@extendclause, thecontent:property appeared wherever the.fa-selector was defined, so we later overwrote it in our%svg-iconselector, which was defined later in the generated CSS.Defining the property with
content: fa-content(), on the other hand, caused thecontent:property to appear wherever we used the mixin with@include has-fa-icon. That meant our%svg-iconselector would appear before it, and would not overwrite it.Objectives
line-heightissue with SVG iconsVisual changes
Before these changes
After these changes
Notes
We could modify a few things and make the code more complicate in order to avoid that. In this case, however, it's easier to add an
!importantflag; after all, it is indeed important that SVG icons have no content so screen readers don't try to announce illegible characters.