Title: Changing Icon Through CSS
Last modified: September 1, 2016

---

# Changing Icon Through CSS

 *  Resolved [motionape](https://wordpress.org/support/users/motionape/)
 * (@motionape)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/changing-icon-through-css/)
 * Hi there,
 * I have a question on the CSS to change the social media icon.
    So I read your
   FAQ on how to change it with CSS and tried it with this code:
 * /*Social Count Plus Icon*/
    .social-count-plus .custom .count-facebook a { background-
   image: url([http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg](http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg));}
 * Apparently it doesn’t change the icon.
    Did I use the CSS incorrectly?
 * Cheers!
 * [https://wordpress.org/plugins/social-count-plus/](https://wordpress.org/plugins/social-count-plus/)

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

 *  Plugin Author [Claudio Sanches](https://wordpress.org/support/users/claudiosanches/)
 * (@claudiosanches)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571898)
 * It’s because is missing the dimensions of the icon.
 * Use this:
 *     ```
       .social-count-plus .custom .count-facebook a {
           background-image: url(http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg);
           width: 30px;
           height: 30px;
       }
       ```
   
 *  Thread Starter [motionape](https://wordpress.org/support/users/motionape/)
 * (@motionape)
 * [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571916)
 * Hi Claudio,
 * Thank you for the response!
    I tried your code but it’s still not changing.
 * I’ve even changed the .custom to .default because I saw the class name as default
   instead of .custom, but it’s still not changing (I’ve tested it by clearing WP
   cache too)
    Screenshot: [http://screencast.com/t/9FTlxzzsRDI](http://screencast.com/t/9FTlxzzsRDI)
 * Cheers and have a good day!
 *  Plugin Author [Claudio Sanches](https://wordpress.org/support/users/claudiosanches/)
 * (@claudiosanches)
 * [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571949)
 * Well need more CSS if you are trying to change the `.default` icons.
 * This can help:
 *     ```
       .social-count-plus .custom .count-facebook a {
           background-image: url(http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg) !important;
           background-position: 0 !important;
           width: 30px !important;
           height: 30px !important;
       }
       ```
   
 *  Thread Starter [motionape](https://wordpress.org/support/users/motionape/)
 * (@motionape)
 * [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571976)
 * Hi Claudio,
 * We tested that code and it doesn’t change the icons. But we saw the logo somehow
   for 0.1 seconds (very quick) before it changes to your icon.
 * Anything I need to disable/change?
 * Cheers!
 *  Plugin Author [Claudio Sanches](https://wordpress.org/support/users/claudiosanches/)
 * (@claudiosanches)
 * [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571980)
 * Ops.
 * This one:
 *     ```
       .social-count-plus .default .count-facebook a {
           background-image: url(http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg) !important;
           background-position: 0 !important;
           width: 30px !important;
           height: 30px !important;
       }
       ```
   
 * I forget to change the `.custom` to `.default`.
 *  [abandoncity](https://wordpress.org/support/users/abandoncity/)
 * (@abandoncity)
 * [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571984)
 * Hi Claudio,
 * I use this css.
 *     ```
       .social-count-plus .default .count-facebook a {
           background-image: url(http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg) !important;
           background-position: 0 !important;
           width: 30px !important;
           height: 30px !important;
       }
       ```
   
 * but the background-position is disabled,
    because this css.
 *     ```
       .social-count-plus .default .count-instagram a {
           background-position: -192px 0 !important;
       }
       ```
   
 * How i disabled this function ?
 * `background-position: -192px 0 !important;`
 * Cheers.
 *  Plugin Author [Claudio Sanches](https://wordpress.org/support/users/claudiosanches/)
 * (@claudiosanches)
 * [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571994)
 * Try
 *     ```
       body .social-count-plus .default .count-facebook a {
           background-image: url(http://guesehat.com/wp-content/uploads/2016/07/icon-fb.jpg) !important;
           background-position: 0 !important;
           width: 30px !important;
           height: 30px !important;
       }
       ```
   

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

The topic ‘Changing Icon Through CSS’ is closed to new replies.

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

 * 7 replies
 * 3 participants
 * Last reply from: [Claudio Sanches](https://wordpress.org/support/users/claudiosanches/)
 * Last activity: [10 years ago](https://wordpress.org/support/topic/changing-icon-through-css/#post-7571994)
 * Status: resolved