Home Forums WoodMart – Premium Template Change Social Icon Color

This topic contains 5 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #169268

    merishop
    Customer

    How can I change social media icon colors I’m using in the footer? I want them to be the official colors. I’m getting colors on hover but I want the official colors without hover too.

    Private Content Hidden
    #169273

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body footer .icons-design-bordered .woodmart-social-icon {
      color: red!important;
    	border:2px solid red;
    }

    Best Regards

    #169297

    merishop
    Customer

    I think you didn’t get my question. The code turns icon into red. But, I want the official colors of icons. For example blue for Facebook, Red for YouTube. I have attached an example. https://prnt.sc/qrg7is

    #169341

    Hello,

    They icons you show are buttons. The footer has outlined icons. Here is the code for each separate icon and you can set the colors as per your needs:

    body footer .icons-design-bordered .woodmart-social-icon i.fa-facebook {
    background-color:blue;
      color: white!important;
     border:2px solid red;
    }
    body footer .icons-design-bordered .woodmart-social-icon i.fa-twitter {
    background-color:blue;
      color: white!important;
     border:2px solid red;
    }
    body footer .icons-design-bordered .woodmart-social-icon i.fa-envelope{
    background-color:blue;
      color: white!important;
     border:2px solid red;
    }
    body footer .icons-design-bordered .woodmart-social-icon i.fa-pinterest{
    background-color:blue;
      color: white!important;
     border:2px solid red;
    }
    body footer .icons-design-bordered .woodmart-social-icon i.fa-linkedin {
    background-color:blue;
      color: white!important;
     border:2px solid red;
    }

    Best Regards

    #169379

    merishop
    Customer

    This is what I got after putting the code. I have attached image.

    Attachments:
    You must be logged in to view attached files.
    #169392

    Hello,

    Please replace the code with this one:

    body footer .icons-design-bordered .woodmart-social-icon i.fa-facebook {
    background-color:blue;
      color: white!important;
     border:2px solid red;
    	width:32px;
    	height:32px;
    	border-radius:30px;
    }
    body footer .icons-design-bordered .woodmart-social-icon i.fa-instagram {
    background-color:blue;
      color: white!important;
     border:2px solid red;
    		width:32px;
    	height:32px;
    	border-radius:30px;
    }
    body footer .icons-design-bordered .woodmart-social-icon i.fa-youtube{
    background-color:blue;
      color: white!important;
     border:2px solid red;
    		width:32px;
    	height:32px;
    	border-radius:30px;
    }
    
    body footer .icons-design-bordered .woodmart-social-icon i.fa-linkedin {
    background-color:blue;
      color: white!important;
     border:2px solid red;
    		width:30px;
    	height:30px;
    	border-radius:30px;
    }
    body footer .icons-design-bordered .woodmart-social-icon{
    border:transparent;
    }

    Best Regards

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.