Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Icon Themes

127 views

Published on

Reusable icon variables and mappings for customizable user interfaces.

Talk at FOSDEM 20178, see https://fosdem.org/2018/schedule/event/osd_icon_themes/

Video available at https://www.youtube.com/watch?v=afZMLCgxl_s

Abstract:
Software platforms need to be highly extensible and customizable, since developers need to build on top of them and provide the best experience for users. Some users put more focus on the styling and visual aspect of their customization, others need it to be highly accessible or responsive, while others just like to have diversity in their choices.

Being able to provide multiple icon sets inside a platform is still a difficult task because of the variety of ways icons can be provided: as images, as font sets, as SVG, etc. I will present a solution for creating and using icon themes, also mentioning the limitations and the difficulties we had in implementing such a solution on our platform. Several icon libraries will be compared, showcasing the reasons, decisions and the compatibility and mapping issues we faced during the process.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Icon Themes

  1. 1. Icon Themes Reusable icon variables and mappings for customizable user interfaces #FOSDEM2018@evalica
  2. 2. Color Themes Simplest way to provide diversity for an interface
  3. 3. Bootstrap Themes Controlling multiple aspects of the interface from colors to typography, spacing, borders, etc.
  4. 4. Icon Themes Allow style alternatives Allow reusability of iconography across interface
  5. 5. Icon Libraries Silk Glyphicons Halflings Font Awesome Material Design Launched 2005 2010 2012 2014 Version 1.3 1.9 4.7.0 3.0.1 Number of Icons 1000 265 786 884 Format PNG PNG, SVG, EOT, TTF, WOFF SVG, EOT, TTF, OTF, WOFF, WOFF2 PNG, SVG, EOT, TTF, WOFF, WOFF2 Resolution 16px 24px, * 14px+, * 18-24-36-48dp, * License CC BY 2.5 Free to use with Bootstrap 3 SIL OFL 1.1 Apache 2.0
  6. 6. Silk famfamfam Font Awesome
  7. 7. Icon Libraries Silk Glyphicons Halflings Font Awesome Material Design Launched 2005 2010 2012 2014 Version 1.3 1.9 4.7.0 3.0.1 Number of Icons 1000 265 786 884 Format PNG PNG, SVG, EOT, TTF, WOFF SVG, EOT, TTF, OTF, WOFF, WOFF2 PNG, SVG, EOT, TTF, WOFF, WOFF2 Resolution 16px 24px, * 14px+, * 18-24-36-48dp, * License CC BY 2.5 Free to use with Bootstrap 3 SIL OFL 1.1 Apache 2.0
  8. 8. Glyphicon Halflings Font Awesome
  9. 9. Home Icon Silk Glyphicons Font Awesome Material Design Icon PNG <img src="house.png"/> <img src="home.png"/> * <img src="/ic_home_black_24dp_1x .png"/> Font - <span class="glyphicon glyphicon-home"></span> <span class="fa fa-home"></span> <i class="material-icons">home </i> SVG - - * <object data="/ic_home_black_24px.s vg" type="image/svg+xml"/> CSS - e021 f015 -
  10. 10. Decorative Icons {{html}} <button type="submit" class="btn btn-default" title="Edit"> <span class="btn-label action-edit">Edit</span> </button> {{/html}} {{css}} .action-edit { padding-left: 16px; background-repeat: no-repeat; background-image: url(".../editor/ic_mode_edit_black_18dp.png");} {{/css}} Inline Icons {{html}} <button type="submit" class="btn btn-default" title="Edit"> <img src=".../editor/ic_mode_edit_black_18dp.png" alt="Edit" title="Edit"/> <span class="btn-label">Edit</span> </button> {{html}}
  11. 11. Icon Libraries Silk Glyphicons Halflings Font Awesome Material Design Launched 2005 2010 2012 2014 Version 1.3 1.9 4.7.0 3.0.1 Number of Icons 1000 265 786 884 Format PNG PNG, SVG, EOT, TTF, WOFF SVG, EOT, TTF, OTF, WOFF, WOFF2 PNG, SVG, EOT, TTF, WOFF, WOFF2 Resolution 16px 24px, * 14px+, * 18-24-36-48dp, * License CC BY 2.5 Free to use with Bootstrap 3 SIL OFL 1.1 Apache 2.0
  12. 12. Material Design Font Awesome
  13. 13. Home Icon Silk Glyphicons Font Awesome Material Design Icon PNG <img src="house.png"/> <img src="home.png"/> * <img src="/ic_home_black_24dp_1x .png"/> Font - <span class="glyphicon glyphicon-home"></span> <span class="fa fa-home"></span> <i class="material-icons">home </i> SVG - - * <object data="/ic_home_black_24px.s vg" type="image/svg+xml"/> CSS - e021 f015 -
  14. 14. Format Comparison Image Font SVG Support All No support for Opera Mini IE9+ Scalability Fixed / Raster Scalable / Text Scalable / Vector HTTP Requests Solo / Sprites Char / Font Solo / Sprites File Size Depends + Multiple resolutions Smaller Depends Load Resource Resource Resource / Inline Browser Styling No Limited Extended Animations No Limited Extended Accessibility Alt Title / Ligatures Title / Desc
  15. 15. SilkFont Awesome {{html}} <span class="fa fa-home"></span> {{/html}} Material Design Icon Themes {{html}} <img src="house.png" alt="House" /> {{/html}} {{html}} <i class="material-icons">home</i> {{/html}} $services.icon.render('home')
  16. 16. Provide a script service that is using a predefined variable mapped on multiple icon sets Icon Theme example ## General settings xwiki.iconset.type = font xwiki.iconset.ssx = IconThemes.FontAwesome xwiki.iconset.jsx = IconThemes.FontAwesome xwiki.iconset.render.wiki = {{html clean="false"}}<span class="fa fa-$icon"></span>{{/html}} xwiki.iconset.render.html = <span class="fa fa-$icon"></span> ## Mapping home = home wiki = globe space = folder page = file-o check = check add = plus anchor = anchor terminal = terminal list = list-alt branch = code-fork down = arrow-down up = arrow-up left = arrow-left right = arrow-right arrows = arrows-alt
  17. 17. Icon Theme Silk xwiki.iconset.type = image xwiki.iconset.render.html = <img src="$xwiki.getSkinFile("../${icon}.png")" alt="Icon" /> xwiki.iconset.render.wiki = [[image:path:$xwiki.getSkinFile("../${icon}.png")]] $services.icon.render('home') Icon Theme Font Awesome xwiki.iconset.type = font xwiki.iconset.render.html = <span class="fa fa-$icon"></span> xwiki.iconset.render.wiki = (%class="fa fa-$icon"%) (%%) $services.icon.renderHTML('home', 'Font Awesome')
  18. 18. Mapping
  19. 19. IcoMoonFont Awesome Foundation Octicons Material Design Ionicons
  20. 20. Ionicons Material Design
  21. 21. Custom Icon Sets Use icon sets generators (Icomoon, Fontello, etc.) and mix and match icons from different sets (thenounproject, materialdesignicons, etc.) CSS or SVG sprites (svg-sprite, sprity, etc.)
  22. 22. Extending Icon Themes Animation / Rotation Stacking / Layering Multi Colors Responsive RTL
  23. 23. Conclusions ● Switch / Migrate / Support multiple sets ● Scalability / Resolution (PNG, SVG, Font) ● Versatility / Number of icons ● Esthetic / Style ● License ● Performance ● Functionality ● Accessibility
  24. 24. Thank you! Questions? #FOSDEM2018@evalica
  25. 25. References ● XWiki Icon Theme Application ● Vector Icons Roundup ● Glyph Search ● Seriously, Don’t Use Icon Fonts ● Inline SVG vs Icon Fonts ● Should I use SVG, Icon Fonts, or Images? ● Ten reasons we switched from to SVG ● Great Icon Debate: Fonts Vs SVG ● Death to Icon Fonts ● Ditching Icon Fonts for SVG

×