[Sprites] social media logos sprite usage

app/assets/stylesheets/application.css.sass

@@ -8,8 +8,10 @@
 
 @import 'icons/*.png'
 @import 'branding/*.png'
+@import 'social_media_logos/*.png'
 @include all-icons-sprites
 @include all-branding-sprites
+@include all-social_media_logos-sprites
 /* ====== media ====== */
 .media
   :margin 10px
@@ -742,6 +744,15 @@ form p.checkbox_select
       :margin
         :right 10px
 
+      .social_media_logos-facebook-16x16,
+      .social_media_logos-twitter-16x16,
+      .social_media_logos-tumblr-16x16,
+      .social_media_logos-email-16x16,
+      .social_media_logos-feed-16x16,
+      .social_media_logos-website-16x16
+        :height 16px
+        :width 16px
+
     #fileInfo
       :display inline
       :position relative
@@ -2745,6 +2756,18 @@ a.toggle_selector
   :padding 10px
     :bottom 0
 
+  .social_media_logos-facebook-24x24,
+  .social_media_logos-twitter-24x24,
+  .social_media_logos-tumblr-24x24,
+  .social_media_logos-email-24x24,
+  .social_media_logos-feed-24x24,
+  .social_media_logos-website-24x24
+    :height 24px
+    :width 24px
+
+  a
+    :display inline-block
+
 .cubbies_images
   :margin-left 15px
 

app/views/shared/_publisher.html.haml

@@ -41,7 +41,11 @@
           %span#publisher_service_icons
             - if current_user.services
               - for service in current_user.services
-                = image_tag "social_media_logos/#{service.provider}-16x16.png", :title => service.provider.titleize, :class => "service_icon dim", :id =>"#{service.provider}", :maxchar => "#{service.class::MAX_CHARACTERS}"
+                = content_tag :div, nil,
+                              :title => service.provider.titleize,
+                              :class => "social_media_logos-#{service.provider}-16x16 service_icon dim",
+                              :id    => "#{service.provider}",
+                              :maxchar => "#{service.class::MAX_CHARACTERS}"
             %a{ :href => "#question_mark_pane", :class => 'question_mark', :rel => 'facebox', :title => t('shared.public_explain.manage') }
               .icons-monotone_wrench_settings
 

app/views/shared/_right_sections.html.haml

@@ -57,7 +57,7 @@
       #right_service_icons
         - AppConfig.configured_services.each do |service|
           - unless current_user.services.any?{|x| x.provider == service}
-            = link_to(image_tag("social_media_logos/#{service.to_s.downcase}-24x24.png", :title => service.to_s.titleize), "/auth/#{service}")
+            = link_to(content_tag(:div, nil, :class => "social_media_logos-#{service.to_s.downcase}-24x24", :title => service.to_s.titleize), "/auth/#{service}")
 
 .section
   .title