I have been working on customizing my menu by using the unicode character \25C6 to represent a black solid diamond as a spacer between labels. After searching for solutions on Stack Overflow, I attempted to implement the suggested method using the before pseudo-element, but I seem to be having difficulty finding exactly what I need.
Currently, I am using the default Twenty-Twelve theme in WordPress with a child theme. While I have come across some related questions regarding removing specific menu item icons, none of the solutions have worked for me yet. My goal is simply to remove or hide the first icon or possibly the last one if using ::after would be more suitable.
I initially tried adding the code to the .nav-menu li, but this made the icon clickable and could potentially create issues. In case it helps, here is the link to my site:
This is the snippet of the code that I have been experimenting with:
.main-navigation ul.nav-menu ::before {
content: "\25C6";
list-style: none;
font-size: 1.15em;
color: #cc8040;
margin: 0 20px 0 0px;
}
.nav-menu li ::before {display: none;}