Kombinierte CSS-Dateifunktionalität

Question

Ich versuche, die HTTP-Anfragen auf meiner Website durch Kombination mehrerer CSS-Dateien zu reduzieren. Ich kopiere und kopiere sie in der Reihenfolge, in der sie sich gerade befinden, wenn alles funktioniert, aber wenn ich versuche, diese riesige kombinierte CSS-Datei zu verwenden, werden bestimmte Symbole nicht angezeigt. Das Problem scheint mit einer font-awesome CSS-Datei zu sein, denn wenn ich das heraustrenne, tauchen die Icons auf.

Ich dachte, dass mehrere CSS-Dateien genau so funktionierten, als würden Sie sie in der Reihenfolge kombinieren, aber das scheint für mich nicht der Fall zu sein. Ich weiß nicht, ob es vielleicht daran liegt, dass die kombinierte CSS-Datei zu groß ist (466 kb) oder dass ich verkleinerte und normale Dateien kombiniere. Ich habe überprüft, dass alle Selektoren genau gleich sind, aber nicht die selbe spezifische Symbole.

Gibt es etwas über das Kombinieren von CSS-Dateien, die ich vermisse?

Answer 1

Font Awesome verweist auf ein Verzeichnis fonts, in dem die Schriftartdateien gespeichert sind. In Ihrer kombinierten CSS-Datei müssen Sie sicherstellen, dass entweder der Schriftartenordner an der richtigen Stelle relativ zu Ihrer CSS-Datei ist, oder Sie müssen den Pfad zu den Schriftarten ändern, die font awesome verwendet.

Unten ist das Snippet Font Awesome verwendet, um die Schriftarten zu verweisen. Möglicherweise müssen Sie die ../fonts/ in ./fonts/ ändern, wenn sich Ihr Stylesheet- und Schriftartenordner im selben Verzeichnis befinden.

@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; 
} 

Normalerweise wird das CSS für font awesome in einem CSS-Ordner gespeichert. Das CSS versucht daher, Schriftarten im Schriftartenordner zu finden, die eine Stufe höher sind als das CSS.

Answer 2

Sie können versuchen, mit Minifier CSS. Sie müssen das Gewicht auf diese Weise reduzieren.

Check Link: CSS minifier