Docs

[dkolba]

Hello,

On my website in the sidebar I created a custom icom: dananicole.ca

As you can see, I have 4 icons. The one on the right hand side is an “X”. I am not sure why it’s an X because it should be ” B’ ” (the bloglovin icon).

For the code, I added this into my custom CSS

.x-icon-bloglovin {
    background:url("http://dananicole.ca/wp-content/uploads/2016/11/blog-lovin-custom-icon.png"); 
    top center no-repeat;
}

I uploaded the photo into my media, and in my custom text sidebar widget I have:
<a href="http://www.bloglovin.com/dananicoledesigns">[x_icon type="bloglovin"]</a>

Would appreciate knowing where I went wrong and how to correct this so I am getting the icon rather than the “X”.

Thank you,

Dana

[Thai]

Hi Dana,

Please try with this CSS:

.inner-social a {
    display: inline-block;
}
.inner-social i.x-icon.x-icon-bloglovin::before {
    content: "";
}
.inner-social i.x-icon.x-icon-bloglovin {
    width: 20px;
    height: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("http://dananicole.ca/wp-content/uploads/2016/11/blog-lovin-custom-icon.png");
    background-position: center center;
}

Hope it helps 🙂

[dkolba]

Thank you, this helps!

Do you know how I would now get the icon to change color upon hover? I changed it from a PNG to an SVG so that I could hopefully edit the CSS for it and change the color. But I can’t seem to figure out where the CSS for the SVG is, or how to target it.

Thanks again,

Dana

[Joao]

Hi Dana,

You need to create another image.

and use:

.inner-social i.x-icon.x-icon-bloglovin:hover {
    width: 20px;
    height: 20px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("http://dananicole.ca/wp-content/uploads/2016/11/blog-lovin-custom-icon-newcolor.png");
    background-position: center center;
}

Hope that helps

Joao

[dkolba]

Ah yes, I should’ve known that!

Thanks for the speedy replies.

[Rahul]

You’re most welcome!

Feel free to ask us again, would be happy to assist you with anything.

Thanks!

[Author]

Posts