ui: swap unicode glyph with inline svg for the settings icon

hashicorp · Dec 4, 2015 · fba54c3 · fba54c3
1 parent eb5edd7
commit fba54c3
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/ui/README.md b/ui/README.md
@@ -57,3 +57,6 @@ development configuration.
 `make dist`
 
 The `dist` folder will contain the files you should use for deployment.
+
+###Acknowledgements
+cog icon by useiconic.com from the [Noun Project](https://thenounproject.com/term/setting/45865/)
diff --git a/ui/index.html b/ui/index.html
@@ -161,7 +161,11 @@
         </div>
 
         <div class="col-md-1 col-sm-2 col-xs-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
-          {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}<span class="wrap">&#9881;</span>{{/link-to}}
+          {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}
+          <svg xmlns="http://www.w3.org/2000/svg" data-icon="cog" viewBox="0 0 32 40">
+            <path d="M14 0l-1.313 4c-1 .3-1.975.688-2.875 1.188l-3.72-1.875-2.78 2.78 1.875 3.72c-.5.9-.888 1.875-1.188 2.875L0 14v4l4 1.314c.3 1 .687 1.975 1.187 2.875l-1.78 3.718 2.78 2.78 3.72-1.874c.9.5 1.905.887 2.905 1.188l1.28 4h4l1.314-4c1-.3 2.006-.688 2.906-1.188L26 28.594l2.813-2.78-1.906-3.72c.5-.9.887-1.905 1.188-2.905L32 18v-4l-4-1.312c-.3-1-.687-1.975-1.187-2.875l1.78-3.72-2.78-2.78-3.72 1.875c-.9-.5-1.905-.888-2.905-1.188L18 0h-4zm2 9c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z"/>
+          </svg>
+          {{/link-to}}
         </div>
       </div>
     </div>

diff --git a/ui/static/base.css.map b/ui/static/base.css.map
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
@@ -112,13 +112,11 @@
 .topbar {
   .btn.icon {
     min-width: 50px;
-    font-size: 30px;
     height: 33px;
-    padding: 0;
-    .wrap {
-      position: absolute;
-      top: -8px;
-      left: 14px;
+    padding: 6px 0;
+    svg {
+      height: 20px;
+      fill: currentColor;
     }
   }
 }