Question

我正在使用Semantic UI构建网站并使用Font Awesome图标。我注意到图标没有正确加载，只是显示为正方形。但是，当我删除页面的CSS样式表链接时，图标DO会正确显示。一旦我将链接重新放入，它们就会再次显示为正方形。

我发现这令人困惑和有问题。知道是什么原因引起的吗？我当然希望能够为页面设置样式表！

Answer 1

样式表可能会覆盖Font Awesome图标。您可以尝试从样式表中删除任何图标（如果有）。如果有效，请告诉我。

Answer 2

我设法将问题定位到我的样式表的一个部分：* { font-family: Avenir, sans-serif !important; }我写了这一行来标准化网站字体，但这是与图标冲突的那一行。知道为什么会这样吗？以及不会冲突的方式设置字体的任何建议吗？

!important告诉财产忽略任何特异性。这意味着您的font-family声明将完全覆盖Font Awesome字体。

通常，浏览器明确设置font-family的唯一内容是html，body，input，select，textarea和{ {1}}元素。考虑到这一点，您应该只需使用以下内容即可完全覆盖任何默认字体：

button

如果这对您不起作用，请检查您的页面以确定未包含自定义字体的位置，并将这些选择器添加到上述声明中。