Change icons in the social menu

newfacesnewplacesblog · Member · Aug 22, 2016 at 7:41 am
Copy link

Add topic to favorites
Hi all,

I want to use the social menu on my blog (new-faces-new-places.com) as my main menu. I am able to add a link to my about page, but the icon is too nondescript for my liking. The icon in question is the chain link (next to the Flickr logo).

Is there a way to change the icon to text/an image/another icon using custom CSS?

Thanks for your time, Zac

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Aug 22, 2016 at 7:51 pm
Copy link
Hi Zac, the icon is set using a pseudo “before” and a content property, so we can simply target that menu item, by id and set the “content” to About like this.
```
.menu-item-148 a:before {
    content: "About";
    margin-left: -20px;
}
```
I had to add -20px of left margin so it would not be right up against the other social icon to the right.
newfacesnewplacesblog · Member · Aug 23, 2016 at 12:12 am
Copy link
Thanks so much, and thanks for the explanation too!
newfacesnewplacesblog · Member · Aug 23, 2016 at 12:19 am
Copy link
Quick follow-up: is there a way to change the icon’s font too? I’ve tried a few ways but nothing seems to be working.
thesacredpath · Member · Aug 23, 2016 at 12:46 am
Copy link
We can do that. Generally the menu items will take the font family of the main content. The following changes the font of that menu item to the same as the headings that you set at Customize > Fonts.
```
.menu-item-148 a::before {
    content: "About";
    margin-left: -30px;
    font-family: "Montserrat",sans-serif;
}
```
newfacesnewplacesblog · Member · Aug 23, 2016 at 1:30 am
Copy link
Thanks again!
thesacredpath · Member · Aug 23, 2016 at 1:52 am
Copy link
You are welcome.

No items found.