JQuery Mobile, Icon Pack Font Awesome doesn't work in Firefox Mac, IE - even on developer site

Question

If you check this link in IE10 or Firefox Mac (latest version), you'll see that the icons don't show up:

http://andymatthews.net/code/jQuery-Mobile-Icon-Pack/

This is the newest build of the pack for JQM 1.4.0. The problem seems to come down, at least in Firefox, to an XML Parsing Error... unclosed token. I don't have a clue what this means or how to fix it.

XML Parsing Error: unclosed token Location: data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%20500%20500%22%3E%20\9%20%3Cpath%20d%3D%22M214.286%20401.786v-303.571q-41.294%200-76.172%2020.368t-55.246%2055.246-20.368%2076.172%2020.368%2076.172%2055.246%2055.246%2076.172%2020.368zM428.571%20250q0%2058.315-28.739%20107.562t-77.985%2077.985-107.562%2028.739-107.562-28.739-77.985-77.985-28.739-107.562%2028.739-107.562%2077.985-77.985%20107.562-28.739%20107.562%2028.739%2077.985%2077.985%2028.739%20107.562z%22%20fill%3D%22#ffffff%22%20%2F%3E%20%3C%2Fsvg%3E Line Number 1, Column 186:<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 500 500"> \9 <path d="M214.286 401.786v-303.571q-41.294 0-76.172 20.368t-55.246 55.246-20.368 76.172 20.368 76.172 55.246 55.246 76.172 20.368zM428.571 250q0 58.315-28.739 107.562t-77.985 77.985-107.562 28.739-107.562-28.739-77.985-77.985-28.739-107.562 28.739-107.562 77.985-77.985 107.562-28.739 107.562 28.739 77.985 77.985 28.739 107.562z" fill=" -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^

---

So it seems to be an issue with the data URI structure? What on earth is with all those dashes?

Naturally, the icons don't work on my site either, and the use of the jqm-icon-pack-fa.css file prevents the use of even the default JQM icons.

Weirdest thing is I seem to be the only one on the internet currently whining about this. Has anyone gotten this to work cross-browser? I've seen other people here in SO having similar problems, but this seems unrelated apart from the same browsers having problems.

Answer 1

I was having your exact same problem, and it turned out to be the # symbol in the hex color (in your example, #ffffff towards the end). Change the # to a %23 and it will work.

Source: https://github.com/commadelimited/jQuery-Mobile-Icon-Pack/issues/62#issuecomment-35314269