{"action":"closed","issue":{"url":"https://api.github.com/repos/xmatthewx/webmaker-addons/issues/27","labels_url":"https://api.github.com/repos/xmatthewx/webmaker-addons/issues/27/labels{/name}","comments_url":"https://api.github.com/repos/xmatthewx/webmaker-addons/issues/27/comments","events_url":"https://api.github.com/repos/xmatthewx/webmaker-addons/issues/27/events","html_url":"https://github.com/xmatthewx/webmaker-addons/issues/27","id":57325464,"number":27,"title":"SVG files in img and css background URLs don't inherit from parent stylesheets","user":{"login":"toolness","id":124687,"avatar_url":"https://avatars.githubusercontent.com/u/124687?v=3","gravatar_id":"","url":"https://api.github.com/users/toolness","html_url":"https://github.com/toolness","followers_url":"https://api.github.com/users/toolness/followers","following_url":"https://api.github.com/users/toolness/following{/other_user}","gists_url":"https://api.github.com/users/toolness/gists{/gist_id}","starred_url":"https://api.github.com/users/toolness/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/toolness/subscriptions","organizations_url":"https://api.github.com/users/toolness/orgs","repos_url":"https://api.github.com/users/toolness/repos","events_url":"https://api.github.com/users/toolness/events{/privacy}","received_events_url":"https://api.github.com/users/toolness/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-02-11T14:53:42Z","updated_at":"2015-02-16T20:49:06Z","closed_at":"2015-02-16T20:49:06Z","body":"What this means for us is that when there's `<text font-family=\"FontAwesome\">` in an SVG, the embedding HTML page isn't consulted for that font, so any glyphs using the font don't show up as intended unless the user has the font installed globally on their filesystem.\r\n\r\nFor instance, this is what [src/icons/TrashIcon.svg](https://github.com/xmatthewx/webmaker-addons/blob/gh-pages/src/icons/TrashIcon.svg) looks like when embedded in [reference.html](https://github.com/xmatthewx/webmaker-addons/blob/gh-pages/reference.html) on my system, which doesn't have Font Awesome installed at the OS level:\r\n\r\n![capture](https://cloud.githubusercontent.com/assets/124687/6149008/af64d532-b1d3-11e4-92a4-0e0c87363e2a.PNG)\r\n\r\nOne possibility might be to figure out how to link to a CSS stylesheet in the SVG file itself, if that's even possible, but I'm not a huge fan of that because it makes the SVG non-portable if the URL isn't absolute. It would probably be easiest to just tell Sketch/Illustrator to vectorize text when exporting, though it will result in larger SVG files.\r\n"}}