Change the color of the Social Icons

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Change the color of the Social Icons */
/* Change the color of all the Social Icons */
.navbar-inner a.social-icon                 {color:red;}     /* Header */
footer#footer .colophon  a.social-icon      {color:red;}     /* Footer */
/* END OF Change the color of the Social Icons */

 

Remember to add the Header .navbar-inner and/or Footer footer#footer .colophon prefix before the a.icon or it will default to the Header icons only.

/* START OF Change the color of the Social Icons */
/* Change the color of individual Social Icons */
a.icon-feed             {color:#DC622C;}    /* Change to desired color */
a.icon-twitter          {color:#00B6F1;}    /* Change to desired color */
a.icon-facebook         {color:#3B5998;}    /* Change to desired color */
a.icon-google           {color:#C20806;}    /* Change to desired color */
a.icon-instagram        {color:#2C6A93;}    /* Change to desired color */
a.icon-tumblr           {color:#34465D;}   /* Change to desired color */
a.icon-flickr           {color:#FF1981;}   /* Change to desired color */
a.icon-wordpress        {color:#04769C;}    /* Change to desired color */
a.icon-youtube          {color:#C31A1E;}    /* Change to desired color */
a.icon-pinterest        {color:#C91517;}    /* Change to desired color */
a.icon-github           {color:#040204;}    /* Change to desired color */
a.icon-dribbble         {color:#333333;}    /* Change to desired color */
a.icon-linkedin         {color:#04669A;}    /* Change to desired color */

/* Alternative - Change the color of individual Social Icons when hovering, otherwise darkgrey */
a.icon-feed             {color:darkgrey;}   /* Change to desired color */
a.icon-twitter          {color:darkgrey;}   /* Change to desired color */
a.icon-facebook         {color:darkgrey;}   /* Change to desired color */
a.icon-google           {color:darkgrey;}   /* Change to desired color */
a.icon-instagram        {color:darkgrey;}   /* Change to desired color */
a.icon-tumblr           {color:darkgrey;}   /* Change to desired color */
a.icon-flickr           {color:darkgrey;}   /* Change to desired color */
a.icon-wordpress        {color:darkgrey;}   /* Change to desired color */
a.icon-youtube          {color:darkgrey;}   /* Change to desired color */
a.icon-pinterest        {color:darkgrey;}   /* Change to desired color */
a.icon-github           {color:darkgrey;}   /* Change to desired color */
a.icon-dribbble         {color:darkgrey;}   /* Change to desired color */
a.icon-linkedin         {color:darkgrey;}   /* Change to desired color */

a.icon-feed:hover       {color:#DC622C;}    /* Change to desired color */
a.icon-twitter:hover    {color:#00B6F1;}    /* Change to desired color */
a.icon-facebook:hover   {color:#3B5998;}    /* Change to desired color */
a.icon-google:hover     {color:#C20806;}    /* Change to desired color */
a.icon-instagram:hover  {color:#2C6A93;}    /* Change to desired color */
a.icon-tumblr           {color:#34465D;}   /* Change to desired color */
a.icon-flickr           {color:#FF1981;}   /* Change to desired color */
a.icon-wordpress:hover  {color:#04769C;}    /* Change to desired color */
a.icon-youtube:hover    {color:#C31A1E;}    /* Change to desired color */
a.icon-pinterest:hover  {color:#C91517;}    /* Change to desired color */
a.icon-github:hover     {color:#040204;}    /* Change to desired color */
a.icon-dribbble:hover   {color:#333333;}    /* Change to desired color */
a.icon-linkedin:hover   {color:#04669A;}    /* Change to desired color */
/* END OF Change the color of the Social Icons */

 

23 thoughts on “Change the color of the Social Icons”

Comments are closed.