Support » Theme: Customizr » How to change social media icons

  • Resolved queque

    (@queque)


    hey Is it possible to change the social media icon for Facebook to its original color blue and white? please let me know

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hey queque,

    You could change it by adding the custom css (either in the “custom css” or by creating a child theme):

    .icon-facebook:before {
        content: "";
        background-color: #3B5998;
        color: white;
    }

    Or you could get the official icon from https://www.facebookbrand.com/ and use it. This is probably the best way, as it wouldn’t be a violation of their brand guidelines, as only their official images are supposed to be used (a lot of sites don’t follow these guidelines).

    Hope that helps!

    Hi SomewhatRounded,

    I’ve downloaded the official icons from Twitter and Facebook but I can’t figure out how to insert them into the header in place of the stock icons. Any idea?

    Thanks!

    I’m looking to do the same. Having looked at the source code, it looks like the FB social icon is being styled using this class “social-icon icon-facebook”. I believe changing the appearance of the icon is going to involve updating this class in the style.css file.

    Hey TimberMark,

    It should work by linking to the image using the content property.

    If you haven’t already, just upload your images and either copy the full link (ex. http://yoursite/images/fb.png) or the relative path (ex. ‘images/fb.png’ or ‘../images/fb.png’ depending on how your folders are set up and where you uploaded the image to) and then just use that link/path in your css:

    content: url('http://www.yoursite.com/style/images/icon-fb.png');

    Thank you somewhatrounded for your feedback. If its violation of their brand guidelines then I dont want to do that.

    I guess I can go find their icons but what would be the css to put in the header and the footer.

    @nathan.schwartz@cox.net that’s correct! But make sure to update either using a child theme or the “Custom CSS” field (Appearance > Customiz’it! > Custom CSS) or you’ll lose your changes when you update your theme

    @queque the icons can usually be found by googling something like “(company name/brand) brand guidelines”, they’ll have the guidelines they would like to be followed and either downloads or links for their official images. Then you just have to either upload the images you downloaded or link to them in your css in place of the icon you are replacing

    .icon-facebook:before {
        content: url('http://www.yoursite.com/style/images/icon-fb.png');
    }

    @somewhatrounded

    Brilliant! It worked like a charm. Did the same for Twitter switching out “twitter” for Facebook.

    One issue I had was that Twitter uses a lot of white space (transparency) in their official logo so I had to scale it with GIMP for proportional spacing with Facebook.

    Great help!

    Thanks TimberMark, glad I could help!

    a.icon-facebook:before {
    	background-color: #3b5998;
    	border-radius: 2px;
    	color: white;
    	padding: 4px 0 0 2px;
    	position: relative;
    	text-shadow: none;
    	top: 4px;
    }
    a.icon-facebook {
    	position:relative;
    	top: -4px;
    }

    @somewhatrounded thank you for your feedback, you have been really helpful. I tried your suggestion with images on my local computer but the Fb icon is broken for some reason.

    @acub thank you for your suggestion.

    @somewhatrounded Ok i fixed it

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘How to change social media icons’ is closed to new replies.