组合 CSS 文件功能

Question

我试图通过组合多个 CSS 文件来减少我网站上的 http 请求。当一切正常时，我正在按照它们现在的顺序复制和粘贴它们，但是当我尝试使用这个巨大的组合 CSS 文件时，某些图标没有显示。问题似乎出在超棒的 CSS 文件上，当我将其分离出来时，图标出现了。

我认为多个 CSS 文件的功能与按顺序组合它们完全相同，但对我来说似乎并非如此。我不知道是否可能是因为组合的 CSS 文件太大（466 kb）或者我正在组合缩小文件和普通文件，我已经检查过所有选择器都完全相同但事实并非如此显示相同的特定图标。

是否有关于合并我丢失的 CSS 文件的内容？

Answer 1

Font Awesome 引用存储字体文件的 fonts 目录。在合并的 CSS 文件中，您需要确保字体文件夹仍然位于相对于 CSS 文件的正确位置，或者您需要更改 font awesome 所在的字体路径使用。

下面是 Font Awesome 用来引用字体的片段。如果您的样式表和字体文件夹在同一目录中，您可能需要将 ../fonts/ 更改为 ./fonts/。

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

通常，字体真棒的 CSS 存储在 CSS 文件夹中。因此 CSS 尝试在比 CSS 高一级的字体文件夹中查找字体。

Answer 2

您可以尝试使用 minifier CSS。你得这样减肥

检查 link: CSS minifier

组合 CSS 文件功能

Combined CSS file functionality

css

font-awesome