问题
There appear to be changes in the way jQuery Mobile handles icons starting from v 1.4. For instance
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
now the generated markup reads
<a href="index.html" data-role="button" data-icon="delete" class="ui-link ui-btn ui-icon-delete
ui-btn-icon-left ui-shadow ui-corner-all" role="button">
"Delete"
::after
</a>
The after pseudo class appears to use markup from the corresponding icons.min.css file which reads
.ui-icon-delete:after
{
background-image: url("data:image/svg+xml;
charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22..g%3E");
}
As far as I can tell the icon images in the /images folder do not get used at all. No issues with this since it seems to work. However, I would be most grateful to anyone who might be able to explain these changes. Also, why do they insist on supplying two separate .min.css files - one only for the SVG images.
...A while later
Hmmm... I looked into this a bit more and still even more puzzled. The jquery.mobile.icons.css file does not change and neither do the images in the icons-png folder. Why do they not just get people to link to them from their CDN?
回答1:
The SVG spec is extensive and no browser currently supports the entire spec. That being said all the latest versions of all the major browsers have basic SVG support. Since none of them have complete support you'll need to check individual features in each browser you're targeting.
jQuery Mobile tries to provide all around support, not like Sencha Touch which only provided support for we-kit browsers, at least initially.
Reason for 2 separate implementations are support for older browsers. If older browser is detected it would gracefully switch to PNG icons, as it used to be.
Update:
jQuery Mobile has 2 separate CSS file structures:
First one is: http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css
This one has everything inside, support for bot kind of icons and everything is part of CDN repository.
For example, here's an icon set from CDN repository.
Second one is: http://code.jquery.com/mobile/1.4.2/jquery.mobile.structure-1.4.2.min.css
This one holds only core jQuery Mobile CSS, it is used with Theme Roller. When you download theme from themeroller you will find everything you need for full jQuery Mobile customization, including incons.
If you want icons to be part of CDN and you are using your own theme just open jquery.mobile-1.4.2.min.css, copy it initial CSS dealing with icons and place it inside jquery.mobile.structure-1.4.2.min.css. There's no point ion creating numerous numbers of CSS files which will cover everyone's needs. At some point you need to do something by yourself.
Thou, and I would agree with this, it is shame why jQuery Mobile developers didn't create custom CSS down loader like they did for JavaScript.
来源：https://stackoverflow.com/questions/23709337/jquery-mobile-1-4-icon-images