Rework icon css

Author: zoglo

public/framework/scss/ctm_styles/_form-input-icon.scss

@@ -16,9 +16,11 @@
       border: $form-input-border-width $form-input-border-style;
       border-color: inherit;
 
-      font: normal normal 400 var(--fi-fs,#{$form-field-icon-size}) 'ctm-icon' #{$form-input-font-family};
+      font: normal normal normal var(--fi-fs,#{$form-field-icon-size}) $icon-font-family, $form-input-font-family;
 
       -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+
       speak: none;
 
       width:     36px;

public/framework/scss/ctm_utils/_mixins/_form.scss

@@ -7,7 +7,6 @@
 @mixin form-field-icon ($class-suffix, $content, $blnIcon: false, $font-size: $form-input-font-size) {
   .fi-#{$class-suffix} {
     --ico:'#{$content}';
-    @if $blnIcon {>.input-container:before {font-family: $icon-font-family;}}
     @if $font-size != $form-input-font-size {--fi-fs:#{$font-size};}
     @content;
   }

public/framework/scss/ctm_utils/_mixins/_icon.scss

@@ -1,12 +1,8 @@
 @mixin icon($content, $font-size: 1em, $line-height: 1) {
   content: $content;
   display: inline-block;
-  font: #{$font-size}/#{$line-height} $icon-font-family;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-
+  font: normal normal normal #{$font-size}/#{$line-height} $icon-font-family;
   -webkit-font-smoothing: antialiased;
-
+  -moz-osx-font-smoothing:grayscale;
   speak: none;
 }

src/Generator/IconGenerator.php

@@ -241,22 +241,19 @@ private function generateIconCSS($glyphs, $fontPath): ?string
                 'font-display:block;'
             ]);
 
-            // Add icon styles
-            $iconSelector1 = '[class^="i-"]';
-            $iconSelector2 = '[class*=" i-"]';
-            $strBefore = ':before';
-            $formIconSelector = '.widget.fi>.input-container'.$strBefore;
+            // Add icon styles (Use specific selectors due to form-icon ('.fi-')
+            $iconSelector1 = '[class^="i-"]:before';
+            $iconSelector2 = '[class*=" i-"]:before';
             $css .= vsprintf(
-                "$iconSelector1,$iconSelector2{%s}$iconSelector1$strBefore,$iconSelector2$strBefore,$formIconSelector{font-family:'%s';%s}",[
-                    'vertical-align: middle;',
+                "$iconSelector1,$iconSelector2{%s '%s';%s%s%s}",[
+                    'font:normal normal normal 1em/1',
                     self::FONTFAMILY_ICON,
-                    'font-style:normal;font-weight:normal;font-variant:normal;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;speak:none;'
+                    'vertical-align:middle;',
+                    '-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;speak:none;',
+                    'padding-right:0.3em;content:var(--ico)'
                 ]
             );
 
-            // Prepend additional css
-            $css .= $iconSelector1.$strBefore.','.$iconSelector2.$strBefore.'{padding-right:0.3em;content:var(--ico);}';
-
             // Add icons
             foreach ($glyphs as $icon)
             {