图标仅在包含样式表时不加载
Icons not loading only when stylesheet is included
我正在使用 Semantic UI 构建网站并使用 Font Awesome 图标。我注意到图标加载不正确，只是显示为正方形。但是，当我将 link 删除到页面的 CSS 样式表时，图标会正确显示。只要我把 link 放回去，它们就会再次显示为正方形。
我发现这相当令人费解且有问题。知道是什么原因造成的吗？我当然希望能够为页面提供样式表！
样式表可能覆盖了 Font Awesome 图标。您可以尝试从样式表中删除任何图标（如果有的话）。让我知道这是否有效。
I managed to target the problem to a single part of my stylesheet: * { font-family: Avenir, sans-serif !important; } I wrote this line to standardize the website font, but it's that line that's conflicting with the icons. Any idea as to why this is? And any suggestions for setting the font in a way that won't conflict?
!important 告诉 属性 忽略任何特殊性。这意味着您的 font-family 声明将完全覆盖 Font Awesome 字体。
通常，浏览器明确设置 font-family 的唯一内容是 html、body、input、select、textarea和 button 个元素。考虑到这一点，您应该能够通过简单地使用以下命令完全覆盖任何 默认 字体：
html, body, button, input, select, textarea {
font-family: Avenir, sans-serif;
}
如果这对您不起作用，请检查您的页面以确定您的自定义字体的位置，并将这些选择器添加到上述声明中。
我正在使用 Semantic UI 构建网站并使用 Font Awesome 图标。我注意到图标加载不正确，只是显示为正方形。但是，当我将 link 删除到页面的 CSS 样式表时，图标会正确显示。只要我把 link 放回去，它们就会再次显示为正方形。
我发现这相当令人费解且有问题。知道是什么原因造成的吗？我当然希望能够为页面提供样式表！
样式表可能覆盖了 Font Awesome 图标。您可以尝试从样式表中删除任何图标（如果有的话）。让我知道这是否有效。
I managed to target the problem to a single part of my stylesheet:
* { font-family: Avenir, sans-serif !important; }I wrote this line to standardize the website font, but it's that line that's conflicting with the icons. Any idea as to why this is? And any suggestions for setting the font in a way that won't conflict?
!important 告诉 属性 忽略任何特殊性。这意味着您的 font-family 声明将完全覆盖 Font Awesome 字体。
通常，浏览器明确设置 font-family 的唯一内容是 html、body、input、select、textarea和 button 个元素。考虑到这一点，您应该能够通过简单地使用以下命令完全覆盖任何 默认 字体：
html, body, button, input, select, textarea {
font-family: Avenir, sans-serif;
}
如果这对您不起作用，请检查您的页面以确定您的自定义字体的位置，并将这些选择器添加到上述声明中。