Fix content property in SVG font icons

In commit 4d49ec8ef 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.
This commit is contained in:
Javi Martín
2021-07-02 15:49:15 +02:00
parent a2ec33eddc
commit d8e9dcb92d

View File

@@ -7,7 +7,7 @@
%svg-icon {
@supports (mask-image: url()) {
background: currentcolor;
content: "";
content: "" !important;
height: 1em;
mask-repeat: no-repeat;
mask-size: 100% 100%;