This is the code to change the color of each social media icon. The icons are in their original color, go to the Aurora website to see the hover status.
Image Removed
...
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
} |
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
} |
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) |
|---|
| showLabels | false |
|---|
| max | 5 |
|---|
| spaces | IKB |
|---|
| sort | modified |
|---|
| showSpace | false |
|---|
|
...
| | reverse | true |
|---|
| 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 |
|---|
|