Hi! Putting this in a separate thread. I'd also like to learn how to add custom icons to navigation links. Similar to this site's tutorial - https://www.beatrizcaraballo.com/blog/navigation-links-icons
I added the code in section 5 to my site, making adjustments as needed - changing the name of the navigation links to what I have, and adding my custom icon urls. But the images didn't populate.
I do have anchor links already set up - is this why it won't work?
This is the exact code I'm using, just left out the links for the icons
.Header-nav--primary .Header-nav-item:nth-child(1)::before {
content: '';
height: 30px;
width: 30px;
display: inline-block;
background: red;
vertical-align: middle;
}
a#site-title, div.header-nav-item *, div.header-menu-nav-item * {
font-family: 'fugue' !important;
}
/*BASIC STYLES FOR ALL LINKS*/
.Header-nav--primary .Header-nav-item::before,
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item::before {
content: '';
height: 40px;
width: 40px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: 5px;
}
/*Clients LINK*/
.Header-nav--primary .Header-nav-item[href="/Clients"]::before,
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item[href="/Clients"]::before {
background-image: url(' ');
}
/*Inquire LINK*/
.Header-nav--primary .Header-nav-item[href="/Inquire"]::before,
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item[href="/Inquire"]::before {
background-image: url(' ');
}
