use sprite for icons

1 files changed, 17 insertions, 1 deletions

diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index 7d271d25fd9..e39ee13be8d 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -13,6 +13,21 @@
   margin: 20px;
   font-weight: 200;
 
+  .gl-snippet-icon {
+    display: inline-block;
+    background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat;
+    overflow: hidden;
+    text-indent: -9999px;
+    text-align: left;
+    width: 16px;
+    height: 16px;
+    background-size: cover;
+
+    &.gl-snippet-icon-doc_code { background-position: -0 -0;  }
+    &.gl-snippet-icon-doc_text {  background-position: -0 -16px; }
+    &.gl-snippet-icon-download {  background-position: -0 -32px; }
+  }
+
   .blob-viewer {
     background-color: $white-light;
     text-align: left;
@@ -108,7 +123,8 @@
       }
     }
 
-    img {
+    img,
+    .gl-snippet-icon {
       display: inline-block;
       vertical-align: middle;
     }