Using Non-Social Media Icon in Navigation Block

Instead of using the navigation block, you could create a row of HTML blocks, i.e., a HTML block for each link:

<a class="home-link" href="/">
    <img src="home-icon.svg">
    <span>Home</span>
</a>

Personally, I’d continue to use the navigation block but use CSS to add the icon before the link text:

a.home-link{
    display:flex;
    align-items:center;
}

a.home-link:before {
    display: block;
    content: ' ';
    background-image: url('home-icon.svg');
    background-size: 20px 20px;
    height: 20px;
    width: 20px;  
}

The icon will be inside the link with the link text.

I don’t see the “Change Menu Icon” option.

Thanks for your response. It looks like the short answer is that the Navigation block doesn’t support icons other than the ones for Social Media. I have a solution putting a Button Group from Stackables to the left of the Navigation block. And using the “Home” text wouldn’t be so bad really.

As for the “Change Menu Icon” option, it’s on the popup “Edit” menu for a Custom Link block in the Navigation block. It’s the fourth option in from the right between the option for a sub-menu and the option for making text bold. When you click on it, it brings up a list of “icons by OTTER”. You can select one, but it doesn’t appear to do anything with it.

I suspect it’s a new feature, not fully supported.

In the block settings sidebar for your home link, you have an “Additional CSS class(es)” text box in the “Advanced” section.

Put these classes in the text box to add a home icon:

dashicons-before dashicons-admin-home

The icon is a Dashicon, a set of icons already built into WordPress.

https://developer.www.ads-software.com/resource/dashicons/

On my end, there’s no “Change Menu Icon” between “Add sub-menu” and “Bold”.

“Change Menu Icon” has probably been added by one of your plugins, presumably Otter Blocks.

https://www.ads-software.com/plugins/otter-blocks/

Thank you again for your help.

Well, the fact that “Change Menu Icon” is not a standard feature of the Gutenberg editor goes a long way to explain why I couldn’t find any documentation about it.

Thank you for the tip about Dashicons. I didn’t know anything about that.

It worked quite easily. Now do you think you could tell me how I could substitute the icon for the word and make it clickable? Or is that what the CSS you sent me earlier is supposed to do?

Replace dashicons-before dashicons-admin-home with home-icon in the “Additional CSS class(es)” text box in the “Advanced” section of the block settings sidebar for your home link.

Add this CSS code to your stylesheet or add it using a plugin:

li.home-icon a span{
    line-height: 0; 
    font-size: 0;
    color: transparent;
}

li.home-icon a span:before{
    content: "\f102";
    font-family: dashicons;
    display: inline-block;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: never;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 20px;
    height: 20px;
    font-size: 20px;
    vertical-align: top;
    text-align: center;
    transition: color .1s ease-in;
    color:#000;
}

Change #000 to whatever color you want the the home icon to be, e.g. the same color as your other links.

You’re not limited to using Dashicon’s home icon. You can find other home icons here:

https://www.google.com/search?q=free+svg+icons

Thank you very much. I appreciate all the help you have provided. I actually understood the css, though I would have never thought of it myself. Maybe I will even remember it for the next time.