[Carrie]

I updated the theme of our website and for the most part the transition seems to be going well. A few things here and there to fix, but I am stuck on this one. My nav menu has dropdowns. There should be little arrows to the right of the menu items that drop down, but they aren’t there. Instead there is a small box in chrome and a box with letters in it with firefox. How do I get the arrrows back?

[KJ]

Hi Carrie. I have the same menu problem with my Tempera theme. Little boxes instead of arrows for dropdown. Did you manage to fix the issue?

[Zed]

You are both using caching plugins. CSS minification currently breaks font support in Tempera.
Disable CSS minification in the caching plugin and the menus glyphs (and fonts for that matter) will return to normal.
We’ll correct this in a future update.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Kelley]

Hi, I have the same problem but don’t seem to have a plugin for caching as you suggest. Can you be more specific or offer another solution?

[Zed]

Kelley, you are encountering a different… behaviour.
If you access your site via http://www.dumcpreschool.org, the icons will appear correctly, but if you access it via dumcpreschool.org (no www.) the icons will be invalid.

See http://stackoverflow.com/questions/11616306/css-font-face-absolute-url-from-external-domain-fonts-not-loading-in-firefox for more info.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[Bara]

Hello,
I have the same issue and cannot find root cause.
I have two environments – production and dev/test. They are more or less same, always before I do any major change I test it in test first.
In dev env the icons work as expected but from some reason I’m not able to find why they don’t work in production. There shall not be any major differences between the two sites but still it doesn’t work in prod.
http://buric-hair.com/ – doesn’t work in Chrome or Firefox
http://dev.buric-hair.com/ – is OK.

I used the hint in previous posts – to remove the arrows from menu completely – but it is not exactly what I wanted. I would prefer to have them as they should be.

Thanks a lot for help or any hint.
Bara

[akis_man]

I solve the problem by changing in style.css this:

#access > .menu > ul > li > a:not(:only-child) span:after {
	font-family:"Open Sans";
    content: '\25be'; /*this one was the old one --> \e80a';*/
    position: absolute; 
    right: 5px;
    top: 10px;

After that my site looks like that:

The arrows is a bit different, but they work.
The arrows can be found in:

[akis_man]

The arrows can be found in: http://www.utf8icons.com/

[Bara]

Hello,

thank you very much. Works for the main menu which is great. Helped a lot!
Only it doesn’t help for the other icons. The back to top icon or the icons in the website path (which I’m anyway figuring out how to get rid of). So the main issue resolved by nice workaround. Still I cannot see why on one site the Elusive icons work fine and on the other which is same the don’t.

Thanks a lot for useful hint!

[Author]

Posts