diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss index 348a0e35e..a6c2fdb8b 100644 --- a/app/javascript/src/styles/base/000_vars.scss +++ b/app/javascript/src/styles/base/000_vars.scss @@ -88,3 +88,16 @@ $success_color: hsl(120, 100%, 95%); // light green margin: 2px; text-align: center; } + +// https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements +@mixin fa-icon($family, $weight, $content) { + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + + font-family: $family; + font-weight: $weight; + content: $content; +} diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss index 41e61f29f..d9fbdb9a1 100644 --- a/app/javascript/src/styles/common/dtext.scss +++ b/app/javascript/src/styles/common/dtext.scss @@ -88,16 +88,13 @@ div.prose { } } - // https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements a.dtext-external-link::after { - display: none; - font: 900 1em "Font Awesome 5 Free"; - content: "\f35d"; // https://fontawesome.com/icons/external-link-alt?style=solid - } + // https://fontawesome.com/icons/external-link-alt?style=solid + @include fa-icon("Font Awesome 5 Free", 900, "\f35d"); - a.dtext-external-link svg { - width: 0.75em; - padding-left: 0.25em; + font-size: 0.6em; + padding: 0 0.2em 0 0.3em; + vertical-align: 1px; } }