Title: CSS Sprites
Last modified: August 21, 2016

---

# CSS Sprites

 *  [Jon Scaife](https://wordpress.org/support/users/jonscaife/)
 * (@jonscaife)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/css-sprites-1/)
 * Not a bug, but a request for a code tweak.
    Currently each social icon has a 
   separate image, which means lots of small HTTP requests which slows page loading.
   Good practice for tiny images like these is to use CSS sprites. In a future version
   could you use CSS sprites instead? Cheers
 * [http://wordpress.org/plugins/wordpress-social-login/](http://wordpress.org/plugins/wordpress-social-login/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [Jon Scaife](https://wordpress.org/support/users/jonscaife/)
 * (@jonscaife)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/css-sprites-1/#post-4369107)
 * For anyone wanting to do this themselves here’s how…
 * Edit wsl.auth.widget.php (in includes/widgets).
    Replace the `<img>` tags on 
   lines 113 and 120 with the following span `<span class="wsl-<?php echo $provider_id?
   >"></span>`
 * Create a CSS sprite and put it in assets\img\16×16 (or the appropriate folder).
   You can [grab](http://cdn.diymediahome.org/wp-content/plugins/wordpress-social-login/assets/img/16x16/sprite.png)
   the sprite I already made if you prefer. It’s for 16x16px images.
 * Use CSS to set the background on the spans. Here is mine…
 *     ```
       a.wsl_connect_with_provider span
       {
       background-image:url('/wp-content/plugins/wordpress-social-login/assets/img/16x16/sprite.png');
       background-color:transparent;
       background-repeat:no-repeat;
       width: 16px;
       height: 16px;
       display: inline-block;
       }
   
       .wsl-Facebook { background-position: -16px -16px; }
       .wsl-Google { background-position: -16px -80px; }
       .wsl-Twitter { background-position: -48px -64px; }
       .wsl-Live { background-position: -32px -48px; }
       .wsl-Yahoo { background-position: -80px -48px; }
       .wsl-LinkedIn { background-position: 0px -16px; }
       .wsl-AOL { background-position: -48px -48px; }
       .wsl-Steam { background-position: -64px -80px; }
       ```
   
 *  [Mel](https://wordpress.org/support/users/acvic/)
 * (@acvic)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/css-sprites-1/#post-4369162)
 * Thanks for this, I wanted to fix pagespeed for a while too

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Sprites’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wordpress-social-login_a1a2bc.svg)
 * [WordPress Social Login](https://wordpress.org/plugins/wordpress-social-login/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-social-login/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wordpress-social-login/)
 * [Active Topics](https://wordpress.org/support/plugin/wordpress-social-login/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-social-login/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wordpress-social-login/reviews/)

## Tags

 * [CSS Sprites](https://wordpress.org/support/topic-tag/css-sprites/)

 * 2 replies
 * 2 participants
 * Last reply from: [Mel](https://wordpress.org/support/users/acvic/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/css-sprites-1/#post-4369162)
 * Status: not resolved