Try as I might I can't get Font Awesome working at all. I've uploaded the Font Awesome pack to my root directory and linked to it.
<link rel="stylesheet" type="text/css" href="font-awesome/jqm-icon-pack-fa.css">
The css includes the font declaration
@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('font/fontawesome-webfont.woff') format('woff'),
url('font/fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
The fonts reside in the child directory root/font-awesome/font/
My link markup example:
<a href="#info" data-rel="popup" data-mini="true"data-iconpos="notext" data-transition="slideup"data-role="button" ><i class="icon-cog"></i></a>
Doesn't seem to matter what icon tag I place - I get a blank circle.
Any suggestions would be appreciable. This happens in Firefox safari on my mac and safari on iOS 6.0 - iPhone
I've tested this on both Font Awesome 4 and earlier versions. My answer below is based on version 4.
So what you need to do is copy your icon classes from the Font Awesome style sheet and add them to your own style sheet. Then just add ui-icon- in front of the class name. You must also do this to the class where the font-family is created.
For example if you have data-icon="fa fa-cog"
The font-family class is .fa and this will become .ui-icon-fa
.ui-icon-fa {}
And the actual icon css .fa-cog will become .ui-icon-fa-cog
.ui-icon-fa-cog:before {
content: "\f013";
}
Hope this makes sense.
Does the Font Awesome website examples work in these browsers?
Make sure your HTML doctype is HTML5: <!DOCTYPE html>
来源：https://stackoverflow.com/questions/18809890/how-where-to-install-font-awesome-in-jquery-mobile-app