CSS ::after - content property display unicode icon (2192) with the same styling on every browser

user_11602380 0
Viewed 679

I'm building a website and I want to display an icon behind a menu-item if that contains a submenu. The sub-menu is not displayed by default, but on click (done with Javascript). I added the arrow like this: 

.menu-item-has-children > a::after {
    content: "\2192";
    width: 0px;
    display: inline-block;
    font-family: serif;
}

I noticed that on Firefox it looks like this: Unicode 2192 on Firefox

but on Safari, Edge and other browsers it looks like this: Unicode 2192 on Safari, Edge etc.

I tried changing the font-family to e.g. serif, in an attempt to display the icon on every browser the same, but that didn't work. Firefox always displays the correct icon, while Safari, Edge etc. display different icons. If I change the font, Safari and Edge also change the styling of the icon, while Firefox remains and displays the same one always.

How do I get every browser to display the same icon, just like Firefox does?

If I visit other websites, like this Unicode Search website or this Unicode Character entities, it does display in every browser the same icon, just like I want.

So how do I display the version for the icon like it is displayed in Firefox and on the websites in every browser?

unicode css
1 Answers

On the unicode website the font family used is actually sans-serif; not serif.

Using serif on that website changes the arrow that is displayed (ie making it not the one you want).

Therefore, it appears font-family: serif; does not display these unicode characters correctly; so you should substitute sans-serif instead:

.menu-item-has-children > a::after {
    content: "\2192";
    width: 0;
    display: inline-block;
    font-family: sans-serif;
}
user_35362360
Related