This is the code to change the color of each social media icon. You can view all of the icons The icons are in their original color as well as their hover states below.. Go to the Aurora website to see the hover status.
...
Blog Lovin’
| Code Block |
|---|
| language | css |
|---|
| title | Blog Lovin’ |
|---|
| collapse | true |
|---|
|
.simple-social-icons ul li.ssi-bloglovin a {
background-color:#24BEF2!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-bloglovin a:hover {
background-color:#0da6d9!important;
color:white!important;
border:0 black solid!important
} |
Dribbble
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-dribbble a {
background-color:#ea4c89!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-dribbble a:hover {
background-color:#e73277!important;
color:white!important;
border:0 black solid!important
} |
code |
| language | css |
|---|
title |
Email
...
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-email a {
background-color:#999999!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-email a:hover {
background-color:#808080!important;
color:white!important;
border:0 black solid!important
} |
Facebook
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-facebook a {
background-color:#3b5998!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-facebook a:hover {
background-color:#324b81!important;
color:white!important;
border:0 black solid!important
} |
Flickr
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-flickr a {
background-color:#ff0084!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-flickr a:hover {
background-color:#cc0069!important;
color:white!important;
border:0 black solid!important
} |
Github
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-github a {
background-color:black!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-github a:hover {
background-color:#404040!important;
color:white!important;
border:0 black solid!important
} |
Google Plus
| Code Block |
|---|
| language | css | title | Google Plus |
|---|
|
.simple-social-icons ul li.ssi-gplus a {
background-color:#dd4b39!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-gplus a:hover {
background-color:#c43421!important;
color:white!important;
border:0 black solid!important
} |
| Code Block |
|---|
|
| language | css |
|---|
title |
Instagram
...
| Code Block |
|---|
| language | css | title | Instagram |
|---|
|
.simple-social-icons ul li.ssi-instagram a {
background-color:#517fa4!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-instagram a:hover {
background-color:#436989!important;
color:white!important;
border:0 black solid!important
} |
LinkedIn
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-linkedin a {
background-color:#007bb6!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-linkedin a:hover {
background-color:#006999!important;
color:white!important;
border:0 black solid!important
} |
Pinterest
| Code Block |
|---|
| language | css |
|---|
| title | Pinterest |
|---|
|
.simple-social-icons ul li.ssi-pinterest a {
background-color:#cb2027!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-pinterest a:hover {
background-color:#b01c21!important;
color:white!important;
border:0 black solid!important
} |
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-rss a {
background-color:#ff6600!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-rss a:hover {
background-color:#cc5200!important;
color:white!important;
border:0 black solid!important
} |
StumbleUpon
| Code Block |
|---|
| language | css |
|---|
| title | StumbleUpon |
|---|
|
.simple-social-icons ul li.ssi-stumbleupon a {
background-color:#EB4823!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-stumbleupon a:hover {
background-color:#d23614!important;
color:white!important;
border:0 black solid!important
} |
Tumblr
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-tumblr a {
background-color:#32506d!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-tumblr a:hover {
background-color:#284157!important;
color:white!important;
border:0 black solid!important
} |
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-twitter a {
background-color:#00aced!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-twitter a:hover {
background-color:#0096cc!important;
color:white!important;
border:0 black solid!important
} |
Vimeo
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-vimeo a {
background-color:#aad450!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-vimeo a:hover {
background-color:#9ccd32!important;
color:white!important;
border:0 black solid!important
} |
Youtube
| Code Block |
|---|
|
.simple-social-icons ul li.ssi-youtube a {
background-color:#bb0000!important;
color:white!important;
border:0 black solid!important
}
.simple-social-icons ul li.ssi-youtube a:hover {
background-color:#990000!important;
color:white!important;
border:0 black solid!important
} |
Related Articles
| Filter by label (Content by label) |
|---|
|
...
| 10 | | spaces | IKB |
|---|
| showSpace | false |
|---|
|
...
| | type | page |
|---|
| cql | label in ( "css" , "web" , "development" , "media" , "wordpress" , "social" , "aurora" ) and type = "page" and space = "IKB" |
|---|
| labels | web development aurora wordpress social media css |
|---|
|