Hey guys, morning, so I want to replace all the links in my menu, with svg icons, using classes. I’ve sent a screenshot of the menu and of the classes I’ve added to each. I want to replace the country names with country flags, so for each link, I put in the country name as the class and a main icon class to style all of 'em.
-> I’m not sure whether my css is correct. Can someone advise. I created a jsfiddle for it. https://jsfiddle.net/janessamckell/12khgqz0/9/
You need to remove the spaces between the classes in the following css rules as they are not descendant selectors - they are on the same selector.
i.e.
.trinidad.flag-icon
Not 
.trinidad .flag-icon
A space denotes a descendant selector
Do the same for the other flags (although they still wont show on the fiddle itself due to cross origin policies I believe).
Great! Thank you @PaulOB That was the missing link!!! Is there anyway to hack it so that it shows the icon only and not the text? WordPress doesn’t allow me to delete the link label…doing this deletes the entire menu item.
Any ideas?
You could make the text color transparent and remove the text-shadow.
#menu ul li a {
text-transform: uppercase;
padding-left: 25px;
font-size: 13px;
color: transparent; /*changed from #fff */
font-style: normal;
padding: 14px;
/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); remove this */
border: 1px solid transparent;
border-left: 0px;
border-right: 0px;
}
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.