use sprite for icons

8 files changed, 20 insertions, 3 deletions

diff --git a/app/assets/images/ext_snippet_icons/doc_code.png b/app/assets/images/ext_snippet_icons/doc_code.png
deleted file mode 100644
index 93a9b372f32..00000000000
--- a/app/assets/images/ext_snippet_icons/doc_code.png
+++ /dev/null
diff --git a/app/assets/images/ext_snippet_icons/doc_text.png b/app/assets/images/ext_snippet_icons/doc_text.png
deleted file mode 100644
index f2357c17c90..00000000000
--- a/app/assets/images/ext_snippet_icons/doc_text.png
+++ /dev/null
diff --git a/app/assets/images/ext_snippet_icons/download.png b/app/assets/images/ext_snippet_icons/download.png
deleted file mode 100644
index 156c788509b..00000000000
--- a/app/assets/images/ext_snippet_icons/download.png
+++ /dev/null
diff --git a/app/assets/images/ext_snippet_icons/ext_snippet_icons.png b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png
new file mode 100644
index 00000000000..20380adc4e5
--- /dev/null
+++ b/app/assets/images/ext_snippet_icons/ext_snippet_icons.png
diff --git a/app/assets/images/ext_snippet_icons/logo.png b/app/assets/images/ext_snippet_icons/logo.png
index 12f8315cad8..794c9cc2dbc 100644
--- a/app/assets/images/ext_snippet_icons/logo.png
+++ b/app/assets/images/ext_snippet_icons/logo.png
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 8dc3519a394..5d2b8ab6651 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -481,7 +481,8 @@
 
 .dropdown-menu-selectable {
   li {
-    a, button {
+    a,
+    button {
       padding: 8px 40px;
       position: relative;
 
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;
     }
diff --git a/app/helpers/icons_helper.rb b/app/helpers/icons_helper.rb
index 67001c55e88..2f304b040c7 100644
--- a/app/helpers/icons_helper.rb
+++ b/app/helpers/icons_helper.rb
@@ -44,7 +44,7 @@ module IconsHelper
   end
 
   def external_snippet_icon(name)
-    content_tag(:img, "", src: "#{image_url('/assets/ext_snippet_icons')}/#{name}.png", width: '16px', height: '16px')
+    content_tag(:span, "", class: "gl-snippet-icon gl-snippet-icon-#{name}")
   end
 
   def audit_icon(names, options = {})