Icons for the menu

Hi @rebecka,

Caroline used some custom CSS and Genericons to achieve the look you’re after.

The following is the custom CSS snippet she used to add the person icon before the link to her site’s About page:

.main-navigation a[href*="/about"]:before {
    content: "\f304";
}

You can customise the above snippet for use on your own set up of Hexa:

• /about would be replaced with the slug for the post/page you’re linking to.
• \f304 would be replaced with the Genericon code that corresponds to the icon you wish to use. You can find a full list of icons and their corresponding codes here:

https://genericons.com/

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can activate its custom CSS module.

Enter the above snippet in either the editor for your CSS plugin or the style.css file of your child theme, and customise it accordingly.

Let me know if the above information helps out or if you have any extra question. ??

Hi @siobhyb and thank you for your time. ??

I have installed and activated a CSS plugin (Simple Custom CSS), and copied and pasted your code.

It doesn’t seem to work properly. I get something in front of the menu, but it’s a rectangle.

Please, see screenshot below:
https://imgur.com/bZXmQdE

I don’t know if it matters, but if it does, I can say that I run locally at the moment (MAMP).

Hi @rebecka,

I’m very sorry – I missed out some important custom CSS that you need to include to achieve what you’re after.

The snippet I provided defines the icon that will appear before a given link:

.main-navigation a[href*="/about"]:before {
    content: "\f304";
}

In addition to the above, you will also need to include the following to style and “tell” the theme that you wish to use Genericons:

.main-navigation a[href*="/about"]:before {
	display: inline-block;
	font-family: Genericons;
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 28.8000431061px;
	margin-right: 4px;
	text-decoration: none;
	text-transform: none;
	width: 24px;
	height: 24px;
	vertical-align: top;
	-webkit-font-smoothing: antialiased;
}

Add different CSS selectors to the list at the start of the above snippet, as you add different icons. For example:

.main-navigation a[href*="/about"]:before, .main-navigation a[href*="/blog"]:before, .main-navigation a[href*="/contact"]:before

Please note, the above also assumes that you have the Jetpack plugin installed, as that plugin enqueues the file for Genericons.

Hope that’s clear! You know where to find us if any questions come up.

Thank you @siobhyb.

I just have to make a grandchild theme of Circa before I do this. I have decided to go for Circa instead of Hexa.

Do you know how to create a grandchild theme? Is there a good guide for it? I’m familiar with child themes but I have never done a grandchild theme before.

A grandchild theme doesn’t seem to be a good idea. Can I use a CSS plugin (the one from Jetpack) instead? Is my CSS changes safe from future updates of child theme Circa if I use a CSS plugin?

Hi @rebecka,

You can find some tutorials to set a grandchild theme up here and here.

As it seems you’ve discovered, though, grandchild themes are not officially supported and considered bad practice by some.

If you only need to add custom CSS, then I instead recommend a custom CSS plugin. As you need to have Jetpack installed for Genericons, you could activate its custom CSS module, and then add CSS via Appearance > Edit CSS.

Let me know how you get on with that. ??

Thank you so much @siobhyb!

I have installed and enabled both Jetpack plugin and its CSS module.

Now I know how I get the icons in the menu. ?? Lovely!

Many thanks again!

• This reply was modified 8 years, 1 month ago by anonymized-7517021.

I’m so glad you got the icons looking as you’d like them to! ?? You know where to find us if any extra questions come up, too.

@siobhyb, is it also possible to add custom icons to links in the social menu? I’d like to link to my spotify account but it doesn’t show an icon thats suitable next to it.

the spotify logo would be best, but a standard ‘play’ triangle (from the genericons) would be fine too…

Already found out! Added this to the style.css:

.social-links ul a[href*="spotify.com"]:before {
  content: "\f515";
}

Uses the spotify logo. Works like a charm!