Question

我试图通过组合多个CSS文件来减少我网站上的http请求。我现在按照他们现在的顺序复制和粘贴它们但是当我尝试使用这个巨大的组合CSS文件时，某些图标不会显示出来。问题似乎是一个字体很棒的CSS文件，就像我将图标分开显示出来一样。

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

是否有关于我缺少的CSS文件的组合？

Answer 1

Font Awesome引用了存储字体文件的fonts目录。在组合的CSS文件中，您需要确保fonts文件夹仍然位于相对于CSS文件的正确位置，或者您需要更改字体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。你必须以这种方式减轻重量。

检查链接：CSS minifier

组合CSS文件功能

2 个答案: