图标（图标字体）总是在 ::before 伪选择器中的原因

Reason for icons (icon fonts) always in ::before pseudo-selector

为什么这么多图标库（Glyhpicon、Font Awesome、Antd 图标……）将它们的图标放在 ::before–pseudo 选择器中？（更确切地说而不是直接在标签中？）

i::before {
    content: '\E60A';
    ...
}

Is there a reason, so many icon-Libraries (Glyhpicon, Font Awesome, Antd icons,…) put their icon in the ::before–pseudo selector?

该方法有几个优点...

  • 使得通过 CSS

    • 为整个站点的不同字符切换特定图标变得微不足道

  • 这些图标主要用作“装饰”而不是实际内容（因此这也涉及可访问性问题）

  • 您不能在实际元素本身中插入 content，这是为伪元素保留的（感谢@Mr Lister 提供的）