feat(font-icon): implemented fonticon styles

Author: BioPhoton

src/scss/_elements.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 /*CSS Star Rating Elements
-====================================================*/
+=================================================================*/
 
 /*HELPER*/
 
@@ -19,10 +19,15 @@ Star element
   position: relative;
   width: $default-star-width;
   height: $default-star-height;
-  @extend .center-all;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   svg, i {
-    @extend .center-all;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     position: absolute;
     top: 0;
     left: 0;
@@ -42,21 +47,6 @@ Star element
     display: none;
   }
 
-  svg {
-    background-size: contain;
-
-    svg.star-empty {
-      background-image: url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0icG9zaXRpb246IGFic29sdXRlOyB3aWR0aDogMDsgaGVpZ2h0OiAwOyBvdmVyZmxvdzogaGlkZGVuOyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgICAgICA8cGF0aCBjbGFzcz0icGF0aC1zdGFyLWVtcHR5IiAgICAgICAgICAgICAgICAgIGQ9Ik0zMy40MTIgMTIuMzk1bC0xMS44NDItMS4wMjEtNC42MjgtMTAuOTA0LTQuNjI4IDEwLjkyLTExLjg0MiAxLjAwNSA4Ljk5MyA3Ljc5MS0yLjcwMSAxMS41NzkgMTAuMTc5LTYuMTQ0IDEwLjE3OSA2LjE0NC0yLjY4NS0xMS41NzkgOC45NzYtNy43OTF6TTE2Ljk0MSAyMi41NDFsLTYuMTkzIDMuNzM5IDEuNjQ3LTcuMDQ5LTUuNDY4LTQuNzQ0IDcuMjE0LTAuNjI2IDIuOC02LjYzOCAyLjgxNiA2LjY1NCA3LjIxNCAwLjYyNi01LjQ2OCA0Ljc0NCAxLjY0NyA3LjA0OS02LjIwOS0zLjc1NXoiLz48L3N2Zz4=);
-    }
-    svg.star-filled {
-      background-image: url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0icG9zaXRpb246IGFic29sdXRlOyB3aWR0aDogMDsgaGVpZ2h0OiAwOyBvdmVyZmxvdzogaGlkZGVuOyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgIDxwYXRoIGNsYXNzPSJwYXRoLXN0YXItZmlsbGVkIiAgICAgICAgICAgICAgICAgIGQ9Ik0xNi45NDEgMjUuNjIxbDEwLjE3OSA2LjE0NC0yLjcwMS0xMS41NzkgOC45OTMtNy43OTEtMTEuODQyLTEuMDA1LTQuNjI4LTEwLjkyLTQuNjI4IDEwLjkyLTExLjg0MiAxLjAwNSA4Ljk5MyA3Ljc5MS0yLjcwMSAxMS41Nzl6Ii8+PC9zdmc+);
-    }
-    svg.star-half {
-      background-image: url(data:image/svg+xml;base64,PHN2ZyBzdHlsZT0icG9zaXRpb246IGFic29sdXRlOyB3aWR0aDogMDsgaGVpZ2h0OiAwOyBvdmVyZmxvdzogaGlkZGVuOyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgICAgICA8cGF0aCBjbGFzcz0icGF0aC1zdGFyLWhhbGYiICAgICAgICAgICAgICAgICAgZD0iTSAzMy40MTIsMTIuMzk1IDIxLjU3LDExLjM3NCAxNi45NDIsMC40NyAxMi4zMTQsMTEuMzkgMC40NzIsMTIuMzk1IDkuNDY1LDIwLjE4NiA2Ljc2NCwzMS43NjUgMTYuOTQzLDI1LjYyMSAyNy4xMjIsMzEuNzY1IDI0LjQzNywyMC4xODYgMzMuNDEzLDEyLjM5NSBaIE0gMTYuOTQxLDIyLjU0MSBjIDAsMCAtMC4yOTc5NzEsLTE0LjY0NTU4MzMgMCwtMTUuMzE4IGwgMi44MTYsNi42NTQgNy4yMTQsMC42MjYgLTUuNDY4LDQuNzQ0IDEuNjQ3LDcuMDQ5IHoiLz48L3N2Zz4=);
-    }
-
-  }
-
   &.icon i {
     font-size: $default-star-font-size;
     line-height: $default-star-line-height;
@@ -72,6 +62,11 @@ Star element
     }
   }
 
+  &.custom-icon i {
+    font-size: 18px;
+    line-height: 18px;
+  }
+
 
   /*
   Fill states
@@ -154,7 +149,7 @@ Star element
       display: none;
     }
     svg {
-      display: block;
+      display: flex;
     }
   }
 
@@ -164,7 +159,7 @@ Star element
       display: none;
     }
     i {
-      display: block;
+      display: flex;
     }
   }
 

src/scss/_modifiers.scss

@@ -1,10 +1,8 @@
 @charset "UTF-8";
 
-@import "elements";
-
 /*
 Rating Component
-=========================================================================*/
+========================================================================= */
 .rating {
   display: flex;
   align-items: center;
@@ -127,7 +125,7 @@ Rating Component
     }
   }
 
-  /*
+/*
 Direction
 ===================================================*/
   &.direction-rtl {
@@ -149,6 +147,9 @@ Direction
   &.star-icon {
     @extend .star.icon;
   }
+  &.star-custom-icon {
+    @extend .star.custom-icon;
+  }
   &.star-svg {
     @extend .star.svg;
   }
@@ -267,7 +268,7 @@ Direction
     transition: all $immediately-animation-type;
     .star {
       transition: $immediately-animation-type;
-      svg, i, img {
+      svg, i {
         transition: $immediately-animation-type;
       }
     }
@@ -278,7 +279,7 @@ Direction
       transition: all $default-animation-speed $default-animation-type;
       .star {
         transition: all $default-animation-speed $default-animation-type;
-        svg, i, img {
+        svg, i {
           transition: all $default-animation-speed $default-animation-type;
         }
       }
@@ -290,7 +291,7 @@ Direction
       transition: all $slow-animation-speed $default-animation-type;
       .star {
         transition: all $slow-animation-speed $default-animation-type;
-        svg, i, img {
+        svg, i {
           transition: all $slow-animation-speed $default-animation-type;
         }
       }

src/scss/_variables.scss

@@ -25,8 +25,8 @@ $color-default-rating: #999 !default;
 $default-star-width: 20px !default;
 $default-star-height: 20px !default;
 
-$default-star-font-size: 27px !default;
-$default-star-line-height: 21px !default;
+$default-star-font-size: 25px !default;
+$default-star-line-height: 25px !default;
 
 $default-label-font-size: 18px !default;
 $default-label-line-height: 18px !default;