The aim of this talk is to develop standards for representing icons in web applications. It ends up to recommendations to W3C and Unicode organization.

1. ©© 2013 Mohammad Anas Ramadan2013 Mohammad Anas Ramadan
http://richstyle.orghttp://richstyle.org
11
Icon StandardizationIcon Standardization
for Web Applicationsfor Web Applications
By: MohammadBy: Mohammad AnasAnas RamadanRamadan

2. © 2013 Mohammad Anas Ramadan
http://richstyle.org
2
IndexIndex
►►Current SolutionsCurrent Solutions
Regular ImagesRegular Images
FontFont--Based Icons:Based Icons: RichStyleRichStyle FontFont
►►Summarizing IconsSummarizing Icons
►►RecommendationsRecommendations
Unicode: Missing IconsUnicode: Missing Icons
W3C: Representing Icons Using CSSW3C: Representing Icons Using CSS

3. © 2013 Mohammad Anas Ramadan
http://richstyle.org
3
Current Solutions:Current Solutions:
Regular ImagesRegular Images

4. © 2013 Mohammad Anas Ramadan
http://richstyle.org
4
CurrentCurrent Solutions:Solutions:
FontFont--BasedBased IconsIcons:: RichStyleRichStyle FontFont

5. © 2013 Mohammad Anas Ramadan
http://richstyle.org
5
Summarizing IconsSummarizing Icons

6. © 2013 Mohammad Anas Ramadan
http://richstyle.org
6
Recommendations:Recommendations:
Unicode: Missing IconsUnicode: Missing Icons

7. © 2013 Mohammad Anas Ramadan
http://richstyle.org
7
Recommendations:Recommendations:
W3C: Representing Icons Using CSSW3C: Representing Icons Using CSS
►► Pseudo Element is simply an attribute hasPseudo Element is simply an attribute has
attributes.attributes.
<command class="page<command class="page--about"/>about"/>
<command class="domain<command class="domain--settings"/>settings"/>
.page.page--about:iconabout:icon {content: char({content: char( ); font:); font:
10pt10pt RichStyleRichStyle; icon; icon--position: top;}position: top;}
.domain.domain--settings:iconsettings:icon {content: char({content: char(⚙⚙););
font: 10ptfont: 10pt RichStyleRichStyle; icon; icon--position:position:
top;}top;}
►► Thus, icon="" as an HTML attribute forThus, icon="" as an HTML attribute for
<command> should be deprecated.<command> should be deprecated.

8. © 2013 Mohammad Anas Ramadan
http://richstyle.org
8
ReferencesReferences
►► A Proposal for A New Pseudo Element Called :iconA Proposal for A New Pseudo Element Called :icon
http://www.w3.org/community/html5spec/2012/09/18/http://www.w3.org/community/html5spec/2012/09/18/
aa--propusalpropusal--forfor--aa--newnew--pseudopseudo--elementelement--icon/icon/
►► RichStyleRichStyle FontFont
http://richstyle.org/font.phphttp://richstyle.org/font.php
►► Unicode SymbolsUnicode Symbols
http://www.unicode.org/charts/#symbolshttp://www.unicode.org/charts/#symbols

9. ©© 2013 Mohammad Anas Ramadan2013 Mohammad Anas Ramadan
http://richstyle.orghttp://richstyle.org
99
Thanks for Listening!Thanks for Listening!