CSS::After-Content属性在每个浏览器上显示具有相同样式的unicode图标（2192

提问者：小点点

我正在建立一个网站，我想在菜单项后面显示一个图标，如果它包含一个子菜单。默认情况下不显示子菜单，而是单击时显示（使用Javascript完成）。我这样加了箭头:

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

我尝试将字体家族更改为衬线，试图在每个浏览器上显示相同的图标，但没有成功。火狐总是显示正确的图标，而Safari，Edge等则显示不同的图标。如果我改变了字体，Safari和Edge也会改变图标的样式，而Firefox保持不变，并且始终显示相同的图标。

我如何让每个浏览器都显示相同的图标，就像Firefox一样？

如果我访问其他网站，像这个Unicode搜索网站或这个Unicode字符实体，它确实在每个浏览器中显示相同的图标，就像我想要的一样。

那么，我如何显示图标的版本，就像它在Firefox和每个浏览器的网站上显示的一样呢？

共1个答案

匿名用户

在unicode网站上，使用的字体系列实际上是无衬线；而不是衬线。

在该网站上使用衬线可以更改显示的箭头（即使其不是您想要的箭头）。

因此，font-family:serif；似乎没有正确显示这些unicode字符；因此您应该替换无衬线:

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