{"action":"created","issue":{"url":"https://api.github.com/repos/ckeditor/ckeditor5-design/issues/109","repository_url":"https://api.github.com/repos/ckeditor/ckeditor5-design","labels_url":"https://api.github.com/repos/ckeditor/ckeditor5-design/issues/109/labels{/name}","comments_url":"https://api.github.com/repos/ckeditor/ckeditor5-design/issues/109/comments","events_url":"https://api.github.com/repos/ckeditor/ckeditor5-design/issues/109/events","html_url":"https://github.com/ckeditor/ckeditor5-design/issues/109","id":129391942,"number":109,"title":"Default theme: icon types","user":{"login":"oleq","id":1099479,"avatar_url":"https://avatars.githubusercontent.com/u/1099479?v=3","gravatar_id":"","url":"https://api.github.com/users/oleq","html_url":"https://github.com/oleq","followers_url":"https://api.github.com/users/oleq/followers","following_url":"https://api.github.com/users/oleq/following{/other_user}","gists_url":"https://api.github.com/users/oleq/gists{/gist_id}","starred_url":"https://api.github.com/users/oleq/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/oleq/subscriptions","organizations_url":"https://api.github.com/users/oleq/orgs","repos_url":"https://api.github.com/users/oleq/repos","events_url":"https://api.github.com/users/oleq/events{/privacy}","received_events_url":"https://api.github.com/users/oleq/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ckeditor/ckeditor5-design/labels/A11Y","name":"A11Y","color":"555555"},{"url":"https://api.github.com/repos/ckeditor/ckeditor5-design/labels/question","name":"question","color":"cc317c"},{"url":"https://api.github.com/repos/ckeditor/ckeditor5-design/labels/UX","name":"UX","color":"000000"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":11,"created_at":"2016-01-28T09:17:30Z","updated_at":"2016-02-18T15:59:07Z","closed_at":null,"body":"There are 3 different types of icons [default theme](105) could use:\r\n\r\n1. PNG (bitmap)\r\n  * Pros:\r\n     * Pixel–perfect.\r\n     * Sprite–ready.\r\n  * Cons\r\n     * A separate iconset needed for HiDPI.\r\n     * Don't scale.\r\n     * Hard to develop and extend, i.e. to change color, a complete re–write (re–render) is needed.\r\n2. SVG\r\n  * Pros:\r\n     * HiDPI–ready.\r\n     * Easy to develop, it's an XML so it's possible to change colors without dedicated editor.\r\n     * Scale out–of–the–box.\r\n  * Cons\r\n     * Harder to create sprites (but still possible).\r\n     * Sometimes it's hard to make SVGs good–looking in different sizes (pixel–perfect).\r\n3. Icon fonts\r\n  * Pros:\r\n     * HiDPI–ready.\r\n     * Scale out–of–the–box.\r\n     * Changing color and size with CSS.\r\n  * Cons\r\n     * Rendering problems (pixel–perfect).\r\n     * Monochromatic only.\r\n     * Forcing developers to learn how to create and compile fonts.\r\n     * Hard to extend (adding new glyphs to existing font?).\r\n     * (?) a11y – what about screen readers?\r\n     * (?) user styles – people use browser extensions and stylesheets which change webpage styles (reading mode, fonts for dyslexics), which would break the font icons\r\n\r\nResources:\r\n * https://css-tricks.com/icon-fonts-vs-svg/\r\n * http://www.creativebloq.com/web-design/icon-fonts-vs-svg-101413211\r\n * http://blog.cloudfour.com/seriously-dont-use-icon-fonts/"},"comment":{"url":"https://api.github.com/repos/ckeditor/ckeditor5-design/issues/comments/185790112","html_url":"https://github.com/ckeditor/ckeditor5-design/issues/109#issuecomment-185790112","issue_url":"https://api.github.com/repos/ckeditor/ckeditor5-design/issues/109","id":185790112,"user":{"login":"koleary","id":1958703,"avatar_url":"https://avatars.githubusercontent.com/u/1958703?v=3","gravatar_id":"","url":"https://api.github.com/users/koleary","html_url":"https://github.com/koleary","followers_url":"https://api.github.com/users/koleary/followers","following_url":"https://api.github.com/users/koleary/following{/other_user}","gists_url":"https://api.github.com/users/koleary/gists{/gist_id}","starred_url":"https://api.github.com/users/koleary/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/koleary/subscriptions","organizations_url":"https://api.github.com/users/koleary/orgs","repos_url":"https://api.github.com/users/koleary/repos","events_url":"https://api.github.com/users/koleary/events{/privacy}","received_events_url":"https://api.github.com/users/koleary/received_events","type":"User","site_admin":false},"created_at":"2016-02-18T15:59:07Z","updated_at":"2016-02-18T15:59:07Z","body":"To take the burden of icon maintenance off of the CK team I recommend using [Font Awesome](https://fortawesome.github.io/Font-Awesome). \r\n\r\nIn addition to over 500 general icons they have an [editor specific set](https://fortawesome.github.io/Font-Awesome/icons/#text-editor)\r\nThey have already solved many of the problems discussed above.\r\n\r\nIf you don't want to implement Font Awesome icons as icon font you can use other tools Node-based like [this](https://github.com/encharm/Font-Awesome-SVG-PNG) to generate images at all sizes and change colors.\r\n\r\nIt's also open-source: https://fortawesome.github.io/Font-Awesome/license/\r\n\r\nBy the way, a plugin that let users add icons to their content from the font awesome set would also be pretty sweet, and if the library is already in CK that would be pretty trivial I imagine."}}