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

Question

有这么多图标库（Glyhpicon、Font Awesome、Antd 图标……）将他们的图标放在::before–pseudo 选择器中吗？（而不是直接在标签中？）

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

Answer 1

有这么多图标库（Glyhpicon、Font Awesome、Antd 图标……）将他们的图标放在 ::before–pseudo 选择器中的原因吗？

这种方法有几个优点...

• 通过 CSS 为整个站点中的不同字符切换特定图标变得轻而易举

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

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