Merge pull request #4578 from consul/fix_font_icon_content

Fix content and line-height in SVG font icons

app/assets/stylesheets/application.scss

@@ -5,6 +5,8 @@
 @import "font-awesome-sprockets";
 @import "font-awesome/variables";
 @import "font-awesome/path";
+@import "font-awesome/mixins";
+@import "font-awesome/core";
 @import "jquery-ui/autocomplete";
 @import "jquery-ui/datepicker";
 @import "jquery-ui/sortable";

app/assets/stylesheets/mixins/icons.scss

@@ -1,5 +1,5 @@
 %font-icon {
-  display: inline-block;
+  @extend %fa-icon;
   font-family: "Font Awesome 5 Free";
   vertical-align: middle;
 }
@@ -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%;