Home Forums Basel – Premium Template How to change the Social icons size and style in footer

This topic contains 5 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 2 weeks, 6 days ago.

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

    Jijo
    Customer

    Hi,

    I can see the social icons in the footer is added using Shortcode. But how to i customize the style and size using a shortcode?

    I want to make the footer social icons colored and medium size.

    Private Content Hidden
    #293614

    Hello,

    You can configure which icons to show in the Theme Settings > Social profiles.

    As soon as you configure give me the details on how to change the social icons.

    Best Regards

    #294380

    Jijo
    Customer

    Social icons are already configured.. I need to know how to make it coloured and make the icon size medium

    #294608

    Hello,

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

    .social-icons li.social-facebook a{
    color:red;
    }
    .social-icons li.social-twitter a{
    color:red;
    }
    .social-icons li.social-linkedin a{
    color:red;
    }
    .social-icons li.social-whatsapp a{
    color:red;
    }
    body .social-icons.icons-size-small li i {
        font-size: 20px;
    }

    Set the color and the size as per your needs.

    Best Regards

    #294641

    Jijo
    Customer

    I want the social icons to look like the Minimalistic theme in Basel.

    Attached the screenshot of the footer that i want.

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

    Hello,

    Replace the code with this one:

    body .social-icons li a{
    color:white;
    }
    body .social-icons.icons-size-small li i {
        font-size: 20px;
    	  height:35px;
    	  width:35px;
        border-radius:50%;
    		text-align:center;
    	  padding:7px;
    }
    body .social-icons.icons-size-small li.social-facebook i {
    background-color:green; 
    }
    body .social-icons.icons-size-small li.social-twitter i {
    background-color:green; 
    }
    body .social-icons.icons-size-small li.social-linkedin  i {
    background-color:green; 
    }
    body .social-icons.icons-size-small li.social-whatsapp  i {
    background-color:green; 
    }

    Replace green with the colors you need.

    Best Regards

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

You must be logged in to reply to this topic.