This is the code to change the color of each social media icon. The icons are in their original color, go . 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
} |
Code Block |
---|
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 |
---|
|