Hi

 

I suspect this has something to do with subfolders, as the site in question isn't at the URL route.

 

I have a font folder which I link to from the header of each page with <link href="routeurl.co.uk/subfolder/css/font-awesome.min.css" rel="stylesheet">

 

The font awesome css file then connects to routeurl.co.uk/subfolder/fonts/fontawesome-webfont.eot with css content like:

 

.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}

 

I'm not sure where the hook up problem lies is it the \f012 elements.

 

Really confused.

Make sure you set the paths correctly on both Font awesome CSS files, or just font-awesome.min.css if you only use that one

Why not just link to the CDN?

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

 

Why not just link to the CDN?

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

 

This, unless you're serving up custom stuff CDN's are nearly always preferable to hosting locally.

 

This, unless you're serving up custom stuff CDN's are nearly always preferable to hosting locally.

 

The actual Font Awesome web fonts are quite large in size (just the SVG version is 287kb). I agree with that using a CDN is often preferable, but in this case, you can use a tool like Icomoon to select the icons you need, and generate a custom font. That should keep the weight down considerably if you're only using a couple of icons.

 

The actual Font Awesome web fonts are quite large in size (just the SVG version is 287kb). I agree with that using a CDN is often preferable, but in this case, you can use a tool like Icomoon to select the icons you need, and generate a custom font. That should keep the weight down considerably if you're only using a couple of icons.

 

Wow, that is insane, that would more than double the page weight for my projects! TBH it's been a long time since I used icon fonts as they're a pain to position and theres a lot of weird edge case bugs with them. Icomoon with svg is a lot better. I was just pointing out that for most libraries it's better to use a CDN rather than hosting it local to your site.

 

I myself just use an SVG sprite, use grunt to build it from all the svg icons that I throw into the targeted folder. Google have a tonne of free SVGs with png fallbacks for IE8. SVG is better than icon fonts in literally every way.. apart from legacy IE support.

Edited November 10, 201411 yr by rbrtsmith

 

Wow, that is insane, that would more than double the page weight for my projects! TBH it's been a long time since I used icon fonts as they're a pain to position and theres a lot of weird edge case bugs with them. Icomoon with svg is a lot better. I was just pointing out that for most libraries it's better to use a CDN rather than hosting it local to your site.

 

I myself just use an SVG sprite, use grunt to build it from all the svg icons that I throw into the targeted folder. Google have a tonne of free SVGs with png fallbacks for IE8. SVG is better than icon fonts in literally every way.. apart from legacy IE support.

 

Yeh, it's something to be aware of, instead just grabbing the entire library of icons. I still need to watch Chris Coyiers most recent talk on SVG, it looks like it puts forward some good use cases for SVG instead of web fonts.

I seen his talk and had a chat with him about it when we were in Trondheim, it was very interesting. He'd convinced me a few months prior to this through his blog posts to make the switch from png sprites to svg sprites. He drew up a table comparing the icon-fonts to SVG. Icon-fonts didn't come out too well..

Edited November 10, 201411 yr by rbrtsmith

i've just cut down my use of genericons font on my site from around 78kb to 4kb for the svg flavour, and the other formats to around 2-4 kb each

Because i only use 3 glyphs from the whole font i used the subset feature on fontsquirrel to select only those 3 glyphs.

 

as an interim measure before moving away from icon fonts to svg it's a relatively easy way to save kb assuming you only need a small proportion of the characters

 

edit: realised i duplicated what jack was saying about glyph selection in icomoon but thought i would illustrate the example

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> it differ upon on versions check the latest version and update it