From d8e9dcb92db717050629ec9e31cf23d90b6fa3e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Fri, 2 Jul 2021 15:49:15 +0200 Subject: [PATCH] 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. --- app/assets/stylesheets/mixins/icons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/mixins/icons.scss b/app/assets/stylesheets/mixins/icons.scss index f1e5b6a7c..4c2d2bd83 100644 --- a/app/assets/stylesheets/mixins/icons.scss +++ b/app/assets/stylesheets/mixins/icons.scss @@ -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%;