One icon is missing in font awesome in Windows

I'm currently using a Windows 7 VM to test my website in IE11. My website uses font awesome and glyphicons. All icons are loaded as expected except for a single one.



<button type="submit">
<i class="fa fa-cart-plus fa-2x"></i>
</button>


Testing in Firefox and Chrome in my Linux Mint machine, all icons render correctly. But both IE and Firefox in Windows show this single icon as a box.





I noticed that in Linux, the .woff2 file was being used while the .woff version was used in Windows. Font Awesome CSS and fonts are being served locally, not from a CDN. Could this make any difference? This missing icon shows correctly on font awesome"s website.



I found a few similar answers in Stack Overflow, most are old and I couldn't fix this because I don't even know where to start. How can I fix this missing icon?



Answers

Also having this issue with Chrome in a local environment (Probably more than that but can't be bothered to fully test) - I suspect the latest release has gotten messed up.



I've built a version using the fa-stack method below, just needs a little css for positioning but works fine:



HTML



<a role="button" class="btn btn-primary">
<span class="fa-stack">
<i class="fa fa-shopping-cart fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-primary"></i>
</span> New</a>


CSS



.fa-primary{
position: relative;
color: #1a9dff;
font-size: 0.5em !important;
top:-4px;
left:2px !important;
}


Edit: I've had to tweak the css for use with the CDN version of FontAwesome - Further suspect the download package and the CDN do not match



See this codepen example



This will overlay a plus icon of the colour of your choosing over the shopping cart icon. (Edit: Apologies for my poor indentation, first time answering!)



I'll point out that something similar happened with Bootstrap a few months ago, I updated the core files from 3.1.1 to 3.3.4 (or something) and it completely destroyed my layouts, though using the CDN used on bootstrap's homepage everything was fine, just not the downloadable package.



Basically, hang about for a bit and I'm sure they'll sort it, even the pros make mistakes - Use the same source as on working examples until the download package gets fixed if you're desperate to use it.



Answers

You're serving an older version of font awesome font files on Linux vs your Windows machine. This icon (fa-cart-plus) is only available starting in v4.3 (http://fortawesome.github.io/Font-Awesome/icon/cart-plus/). Make sure both machines are being served fontawesome 4.3 font files and it'll work fine.



CDN is always helpful to use, but it's not going to show you the root cause of your problem.



Answers

you can use this CSS in your webpage



<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">