Icon Standardization for Web Applications

©© 2013 Mohammad Anas Ramadan 2013 Mohammad Anas Ramadan

http://richstyle.orghttp://richstyle.org11

Icon StandardizationIcon Standardizationfor Web Applicationsfor Web Applications

By: Mohammad By: Mohammad AnasAnas RamadanRamadan

© 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

Current Solutions:Current Solutions:

Regular ImagesRegular Images


4

Current Current Solutions:Solutions:

FontFont--BasedBased IconsIcons: : RichStyleRichStyle FontFont


5

Summarizing IconsSummarizing Icons


6

Recommendations:Recommendations:

Unicode: Missing IconsUnicode: Missing Icons


7

Recommendations:Recommendations:

W3C: Representing Icons Using CSSW3C: Representing Icons Using CSS

►► Pseudo Element is simply an attribute has Pseudo 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:

10pt 10pt RichStyleRichStyle; icon; icon--position: top;}position: top;}

�� .domain.domain--settings:iconsettings:icon {content: char({content: char(⚙⚙); );

font: 10pt font: 10pt RichStyleRichStyle; icon; icon--position: position:

top;}top;}

►► Thus, icon="" as an HTML attribute for Thus, icon="" as an HTML attribute for <command> should be deprecated.<command> should be deprecated.


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

©© 2013 Mohammad Anas Ramadan 2013 Mohammad Anas Ramadan

http://richstyle.orghttp://richstyle.org99

Thanks for Listening!Thanks for Listening!

Icon Standardization for Web Applications

Software

Transcript of Icon Standardization for Web Applications