Font Awesome icons conflict with jQuery UI icons

5
votes

When I add jqm-icon-pack-2.1.2-fa.css to my website, the jQuery UI fonts don't show. If I remove the reference, they show. I'm creating an MVC4 mobile application using Visual Studio 2012. Here is how I'm referencing the css files:

<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile.structure-1.2.0.css")" type="text/css">
<link rel="stylesheet" href="@Url.StaticStylesheet("jquery.mobile.theme-1.2.0.css")" type="text/css"> 
<link rel="stylesheet" href="@Url.StaticStylesheet("jqm-icon-pack-2.1.2-fa.css")" type="text/css">

If I remove the last reference, the jQuery icons work but the Font Awesome icons don't work. I've tried to reorder the references and that didin't work. I've inspected the page with Firebug and I can't see a difference. I've made sure the paths are correct as well. I'd like to post a link to my website but it's inside an extranet so it can't be accessed. The best I can offer is I'm setting an input to type="search" and the search icon and clear text icon do not appear. Any help would be greatly appreciated!!

ANSWER: I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.

1
jquery-mobilefont-awesome
You should edit out the answer to your question and post it as an actual answer to your question and mark it as accepted. This way when people see your question listed they can see that there is a working solution. – Jack
Sorry, I had to wait before I could actually post the answer to my own question. Not sure why that is but be that as it may I've posted the answer. Thanks! – Darrell

1 Answers

3
votes

I solved the problem and hopefully can save others some grief and hours of beating their heads on the keyboard like I did! When you use NuGet Package Manager to get jQuery mobile, it adds some image files called icons-18-black.png, icons-18-white.png, icons-36-black.png, and icons-36-white.png. If you're not careful you can miss the fact that there are some slightly different image files on the github website you need to include with Font Awesome called icons-18-black-pack.png, icons-18-white-pack.png, icons-36-black-pack.png, and icons-36-white-pack.png. Notice that the word "pack" is included in the name of these files and they're slightly different than the original files included with jQuery mobile. Just be sure you add in the missing files plus the ajax-loader.png file which is different than the ajax-loader.gif file included with jQuery mobile as well and all should work.