queue  12
support
Results 1 to 5 of 5

Thread: Changing Twitter icon to Houzz icon

  1. #1
    Junior Member
    Join Date
    Aug 2017
    Posts
    14

    Changing Twitter icon to Houzz icon

    Hi,
    I am trying to swap out the twitter icon with a houzz icon. I went into my image folder in my visit theme and saved the Houzz logo as the twitter icons names. When I look at the site it is still showing the Twitter. I also added this to my custom CSS

    #footer ul.social-links .icon-twitter:before {
    content: url('/wp-content/themes/visia/images/twitter-large.png') no-repeat !important;
    }

    my site address is www.galegoff.com/new_site

    How do I make the Houzz icon show instead of Twitter?

  2. #2
    Junior Member
    Join Date
    Aug 2017
    Posts
    14
    Hello,
    I am still trying to get this to work. I went into the actual image folders and saved the houzz logo over the Twitter logos for the social media icons and it still will not work.

  3. #3
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    2,035
    Hi, I've checked your site and I don't see that CSS in the page are you sue you have added it correctly? Next, if you are adding an image to replace an icon font icon, which would be the case here, I wouldn't add the image into the ':before' element, this is just a way to add icon font icons, instead I'd just add it into the 'i' element itself, i.e. dont include the ":before" part. However you may need to empty the content of the 'before' item first. you could do this using ...:before{ content:" ";} This would clear the current icon font. Finally when specifying image paths in WP theme CSS I'd always use a full path, starting with http...etc just to make sure the theme can find the image. Try making these changes when you insert the css again. If it still doesn't work, make sure to leave it there when you post again, so I can check what is going wrong.

  4. #4
    Junior Member
    Join Date
    Aug 2017
    Posts
    14
    Hi, i think I updated the CSS as you said, but it still isn't the houzz logo I saved into the image folder. I put it into the Custom Css field.
    Thank you so much for your assistance!

  5. #5
    Administrator Donagh's Avatar
    Join Date
    Aug 2011
    Posts
    2,035
    Hi, Your CSS is incorrect. Delete it and try this instead. Post here and I'll check again, it may need another tweak.

    Code:
    #footer ul.social-links .icon-twitter:before{ content:"";}
    #footer ul.social-links .icon-twitter{ background:url('http://galegoff.com/wp-content/themes/visia/images/twitter-large.png') no-repeat center center;}
    Btw it looks to me like there is no such image in that path. I'd advise you to upload the image you want to use into your media library just like any other image you wish to use in your theme, then you can copy the path shown in the asset page in the media library in the WP admin. This this instead of the above path in the css.