Argthtjtr

I'm using the unicode 25C6 for the black solid diamond in my menu as a spacer between labels. I used the before pseudo-element per a thread found here on Stack Overflow. I searched here for about an hour but what I'm looking to do I might not be searching for with the right wording.

I'm only using the out of box Twenty-Twelve theme from Wordpress with a child theme. I did find some other similar questions about removing particular menu item icons, but I haven't found one that works for me. I just want to remove or "display:none" the fist icon or the last if someone thinks ::after is better to use.

I have tried adding it to the .nav-menu li but that makes it clickable and possibly a problem. I hope I've add the link properly be to the site, apologies if not.

This is the site http://vangurubros.com/

This is what I've tried to get the unicode to work

.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;}

yes it is possible through css.

Use :not(:first-child) pseudo element/class (whatever)

ul.nav-menu li:not(:first-child)::before {

    content: "25C6";

    list-style: none;

    font-size: 1.15em;

    color: #cc8040;

    margin: 0 20px 0 0px;

}

ul li{display:inline-block;}

<ul id="menu-amenu" class="nav-menu"><li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-24 current_page_item menu-item-58"><a href="http://vangurubros.com/">Home</a></li>

<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://vangurubros.com/media/">Media</a></li>

<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://vangurubros.com/news/">News</a></li>

<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://vangurubros.com/contact/">Contact</a></li>

</ul>

Try this

You need to add code like this:

.main-navigation ul.nav-menu li::before {

       content: "25C6";

       list-style: none;

       font-size: 1.15em;

       color: #cc8040;

       margin: 0 20px 0 0px; 

    }

    .main-navigation ul.nav-menu li:first-child::before {

      display: none;

    }