Add Icons to social menu

Hello,

We’re using icons from the Font Awesome pack. You’ll have to add the logo images manually and add the necessary code if you need other buttons.

Thanks! Can you please give me a hint where to find the images and the code?
Do I have to adjust for example this code:
.social-widget a[href*=”tumblr.com”]::before ,
.social-area a[href*=”tumblr.com”]::before {
content: ‘\f174’;
}

That would need to be something like this:

.social-widget a[href*="tumblr.com"],
.social-area a[href*="tumblr.com"] {
   background: url(imagepath.png);
   background-size: cover;
   height: 30px;
   width: 30px;
}

This is just an example you’d probably need to tweak it a little. And the images you would need to add yourself. Just find the logos for the services you need.

And I forgot to mention, if the icon you want is already part of Fontawesome, you can use the code like this for xing:

.social-widget a[href*="xing.com"]::before ,
.social-area a[href*="xing.com"]::before {
    content: '\f168';
}

There’s an plugin for that called ‘Menu Icons’ by Dzikri Aziz.

Ivegate does the plugin allow us to inset our own icon on the moesia social widget too?

I have some my own that aren’t possible on Font awesome, such as a snowflake, for our winter menu

I added WP SVG icons plugin and almost managed to insert one into the services widget..but it shows as a filled circle, which I assume is some sort of standard container for the Font awesome icons..I’d really like to add my own though

That circle comes from the theme, not from Fontawesome. It’s empty for your first service because you didn’t enter valid Fontawesome code. If you have your own images or icons to add you can leave the icon field empty and add your image in the post editor and it will be displayed below the service title.

thanks, yes I do see how to add the services image for the front page underneath the icon, by including the image in the services section page.

I’m trying to do the the same thing as elsmako, insert a logo instead of FA, because FA doesn’t have one that is relevant to my services. I also requested an icon via Font Awesome.

I tried using your example above with my own icon image, but it doesn’t show up. I did delete the FA code on the services page first too.

.social-widget a,
.social-area a {
background: url(https://pandoraslunchbox.eu/wp-content/uploads/2014/12/bee.png);
background-size: cover;
height: 30px;
width: 30px;
}

https://pandoraslunchbox.eu/
am just re doing the image to below 30px …ps please don’t think I expect anyone to answer this until way after the holidays…I’m only doing it today myself because I am stuck inside a tad bored.
Happy solstice all x

That code would apply to the social widget, not to the services one. So apply it to .service-icon. But please note: add some random letters to the service icon field so you can get that round element to show up in order to attach your image to it.

.service-icon a,[href*=”tumblr.com”]
.service-area a [href*=”tumblr.com”]{
background: url(https://pandoraslunchbox.eu/wp-content/uploads/2014/12/bee1.png) !important;
background-size: cover;
height: 30px;
width: 30px;
}

no change, & added 3 random lower case letter to services icon field

Of course nothing changed ??
Add it like this:

.service-icon {
background: url(https://pandoraslunchbox.eu/wp-content/uploads/2014/12/bee1.png) !important;
background-size: cover;
}

that’s interesting but it changes the background of the icon, not the icon.

Well, yeah, that’s the whole point, to change the background of that circle. You cannot add your own non-Fontawesome icon in another way.

I see, I thought elsmacko was asking how to add different icons to font awesome,…will still to those then. Thanks.