svg instead of font for icons

GanjooRazor/Pages/_InlineLoginPartial.cshtml

@@ -7,8 +7,8 @@
     <div class="clear-both">
         <div class="float-right display-inline-flex width-76px">
             <a onclick="switchSticky()" role="button" class="cursor-pointer" title="چسبانی">
-                <div class="noborder-btn color-white" id="pin_button">
-                    <i class="notranslate noindent-info-button pin-button"></i>
+                <div class="noborder-btn color-white">
+                    <svg id="pin_button" class="noindent-info-button" height="24px" viewBox="0 0 24 24" width="24px"><g><rect fill="none" height="24" width="24" /></g><g><path d="M14,4v5c0,1.12,0.37,2.16,1,3H9c0.65-0.86,1-1.9,1-3V4H14 M17,2H7C6.45,2,6,2.45,6,3c0,0.55,0.45,1,1,1c0,0,0,0,0,0l1,0v5 c0,1.66-1.34,3-3,3v2h5.97v7l1,1l1-1v-7H19v-2c0,0,0,0,0,0c-1.66,0-3-1.34-3-3V4l1,0c0,0,0,0,0,0c0.55,0,1-0.45,1-1 C18,2.45,17.55,2,17,2L17,2z" /></g></svg>
                 </div>
             </a>
 
@@ -24,7 +24,7 @@
             {
                 <a onclick="document.getElementById('navbarhelp').style.display='block'" role="button" class="cursor-pointer" title="راهنما">
                     <div class="noborder-btn color-white">
-                        <i class="notranslate noindent-info-button help-button mirror"></i>
+                        <svg class="noindent-info-button" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none" /><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></svg>
                     </div>
                 </a>
             }

GanjooRazor/wwwroot/css/p8.css

@@ -926,6 +926,7 @@ ol {
     direction: ltr;
     -moz-font-feature-settings: 'liga';
     -moz-osx-font-smoothing: grayscale;
+    fill: white;
 }
 
 .footer-contents .material-icons {
@@ -1307,6 +1308,7 @@ ol {
 
 .color-white {
     color: white !important;
+    fill: white !important;
 }
 
 .color-gray {
@@ -1319,6 +1321,7 @@ ol {
 
 .color-disabled {
     color: #a17a7a !important;
+    fill: #a17a7a !important;
 }
 
 .clear-both {
@@ -2216,12 +2219,21 @@ mark {
         -webkit-text-fill-color: burlywood;
     }
 
+
     #main, .poem, .sitem, .related-images-frame, .comments-like-div {
         background: rgba(27, 27, 27, 0.6) url('/image/pbk-b.jpg') top center repeat scroll;
         border-color: darkgray;
         background-blend-mode: multiply;
     }
 
+    .noindent-info-button {
+        fill: burlywood;
+    }
+
+    .color-white {
+        color: burlywood !important;
+        fill: burlywood !important;
+    }
 
 
     .clear-both,