CODEWITHSUNDEEP
cssfont-awesome
MarksCode
MarksCode

Reputation: 8576

Combined CSS file functionality

I'm trying to reduce the http requests on my website by combining multiple CSS files. I'm copying and pasting them in the order they are right now when it all works but when I try using this giant combined CSS file certain icons aren't showing up. The problem seems to be with a font-awesome CSS file, as when I separate that out the icons show up.

I thought that multiple CSS files functioned exactly the same as if you were to combine them in order but this does not seem to be the case for me. I don't know whether maybe it's because the combined CSS file is too big (466 kb) or that I'm combining minified and normal files, I've checked that all the selectors are the exact same but it's not showing the same specific icons.

Is there something about combining CSS files that I'm missing?

Upvotes: 2

Views: 294

Answers (2)

A. M. Mérida
A. M. Mérida

Reputation: 2618

You can try with minifier CSS. you have to reduce the weight this way.

check link: CSS minifier

Upvotes: -1

Jared
Jared

Reputation: 12524

Font Awesome makes reference to a fonts directory where the font files are stored. In your combined CSS file you will need to make sure that either the fonts folder is still in the right spot relative to your CSS file or you will need to alter the path to the fonts that font awesome is using.

Below is the snippet Font Awesome uses to reference the fonts. You may need to change the ../fonts/ to ./fonts/ if your stylesheet and fonts folder are in the same directory.

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

Normally the CSS for font awesome is stored in a CSS folder. So the CSS tries to find fonts in the fonts folder one level higher than the CSS.

Upvotes: 4

Related Questions