Icons

(Difference between revisions)

Jump to: navigation, search
m (corrected link for openmap.gif)
Current revision (14:56, 27 June 2016) (view source)
(fixed link)
 
(8 intermediate revisions not shown.)
Line 1: Line 1:
-
<h1> Icons </h1>
+
<entry-title> Icons </entry-title>
These icons can be used to depict various microformats in webpages or on the desktop.
These icons can be used to depict various microformats in webpages or on the desktop.
Line 5: Line 5:
* [http://factoryjoe.com/blog Chris Messina]
* [http://factoryjoe.com/blog Chris Messina]
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
* [http://dmitry.baranovskiy.com Dmitry Baranovskiy]
 +
* [http://ripplefxinc.com Gabriel Dibble] &middot; [[User:Gdibble|^]]
* [http://bartleme.at Wolfgang Bartelme]
* [http://bartleme.at Wolfgang Bartelme]
Line 19: Line 20:
=== Web ===
=== Web ===
-
A [http://factorycity.net/projects/microformats-icons/ first effort] has been completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.
+
A follow-up to Wolfgang & Chris' excellent work, Gabriel has created an extra-small (10x12) general use icon to indicate both ''a vCard download-link'' and ''the integration of an hCard''. In contrast to the more attention-commanding graphics below, this icon intends to ''cleanly and elegantly'' integrate into footers or any in-line text ''(more appropriate for'' some'' site designs)'':
 +
 
 +
* https://github.com/gdibble/microformatsIcons/raw/master/vCard.xsm.png vCard download / hCard integrated &nbsp;([https://github.com/gdibble/microformatsIcons/blob/master/README readme])
 +
 
 +
 
 +
The first effort was completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.
==== General ====
==== General ====
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hatom.png hAtom  
+
* http://img.skitch.com/20090827-qa9y941qxn6haf1y2e31fydt7.png hAtom  
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcalendar.png hCalendar  
+
* http://img.skitch.com/20090827-qg4y5k6ayapuc3fm36a8hada6b.png hCalendar  
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-add.png hCard Add  
+
* http://img.skitch.com/20090827-f3qdiebfdr665y1ag1byy31du2.png hCard Add  
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hcard-download.png hCard Download  
+
* http://img.skitch.com/20090827-fnq86wtfttf2tah18q4j69wbka.png hCard Download  
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-hresume.png hResume (button)  
+
* http://img.skitch.com/20090827-pc154xc2xw6ainsajxbncmxqyg.png hResume (button)  
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-rel-tag.png rel-tag (button)  
+
* http://img.skitch.com/20090827-twehb4b77egeieidept1cg7q6t.png rel-tag (button)  
-
* http://factorycity.net/projects/microformats%2Dicons/images/icon-xfn.png XFN (button)  
+
* http://img.skitch.com/20090827-p1rkxqnrhwyuta8wghi6xe3bbw.png XFN (button)  
 +
* http://github.com/bcampbell/hnews_popup/raw/master/hnews_icon.png hNews
'''Based on the General Icon DevKit:'''
'''Based on the General Icon DevKit:'''
Line 36: Line 43:
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard
* http://farm1.static.flickr.com/235/515843768_98956242a7_o.png hCard
* http://farm3.static.flickr.com/2178/2528693942_1a58d71d27_o.png [http://notizblog.org/projects/haudio-icons/ hAudio Icons]
* http://farm3.static.flickr.com/2178/2528693942_1a58d71d27_o.png [http://notizblog.org/projects/haudio-icons/ hAudio Icons]
 +
 +
'''Icon Font:'''
 +
 +
* The [http://pfefferle.github.io/openwebicons/icons/#microformats-icons OpenWeb-Icons] are providing some of the icons above as web-fonts
'''Comments:'''
'''Comments:'''
Line 46: Line 57:
*** [[User:PatHawks|PatHawks]] thinks smaller is better, if the icon is going to sit next to every tag
*** [[User:PatHawks|PatHawks]] thinks smaller is better, if the icon is going to sit next to every tag
** [[User:Pfefferle|Pfefferle]] suggests the [http://www.famfamfam.com/lab/icons/silk/ FamFamFam] tag-icon: http://notizblog.org/wp-content/uploads/2007/05/tag_blue.png
** [[User:Pfefferle|Pfefferle]] suggests the [http://www.famfamfam.com/lab/icons/silk/ FamFamFam] tag-icon: http://notizblog.org/wp-content/uploads/2007/05/tag_blue.png
 +
** [[User:Gdibble|Gabriel Dibble]] liked the idea, thus producing the 10x12 transparent icon ''above''
* Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"
* Tantek wonders whether we need an hCard Download icon -- since it focuses too much on the "pipes"
* Ron thinks it's ok to use icons, cause it's a nice way of promoting the "Microformat idea". Maybe it's a good idea to use a downward aimed arrow to indicate the possibility to "download" something (like an hCard or hResume).
* Ron thinks it's ok to use icons, cause it's a nice way of promoting the "Microformat idea". Maybe it's a good idea to use a downward aimed arrow to indicate the possibility to "download" something (like an hCard or hResume).
Line 54: Line 66:
==== XFN ====
==== XFN ====
-
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-me.png rel-me  
+
* http://img.skitch.com/20090827-r6ksuun131mk1rupdittkh987b.png rel-me  
-
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-friend.png rel-friend  
+
* http://img.skitch.com/20090827-f6y8qp5q5b3ejtyphw931698uw.png rel-friend  
-
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-friend-met.png met  
+
** http://img.skitch.com/20090827-kwbt1kty45ynp8nxf3wbyyderx.png met  
-
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-sweetheart.png rel-sweetheart  
+
* http://img.skitch.com/20090827-tmm7p8pkw149hfdku8jfc2greu.png rel-sweetheart  
-
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-sweetheart-met.png met  
+
** http://img.skitch.com/20090827-t3btra8dyxnp5fshqg58ywjhc.png met  
-
* http://factorycity.net/projects/microformats%2Dicons/images/xfn-colleague.png rel-colleague  
+
* http://img.skitch.com/20090827-miwd8ux7kf35fntsqriicrrjsw.png rel-colleague  
-
** http://factorycity.net/projects/microformats%2Dicons/images/xfn-colleague-met.png met  
+
** http://img.skitch.com/20090827-pjeiakssxjyr54k7htr3qjxgmu.png met  
'''Comments:'''
'''Comments:'''
Line 73: Line 85:
[http://microformats.org/wiki/vote-links VoteLinks]
[http://microformats.org/wiki/vote-links VoteLinks]
-
* http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for
+
* [http://web.archive.org/web/20071018093426/http://deliciouslymeta.com/projects/vote-links/vote-for.gif vote-for]
-
* http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against
+
* [http://web.archive.org/web/20071018093433/http://deliciouslymeta.com/projects/vote-links/vote-against.gif vote-against]
-
* http://factorycity.net/projects/microformats%2Dicons/images/vote-links.png (download the [http://factorycity.net/projects/microformats%2Dicons/files/vote-links.zip kit])
+
* [http://web.archive.org/web/20070730010522/http://www.factorycity.net/projects/microformats-icons/images/vote-links.png] (download the [http://web.archive.org/web/20070730010851/http://www.factorycity.net/projects/microformats-icons/files/vote-links.zip kit])
   
   
'''Comments:'''
'''Comments:'''
Line 88: Line 100:
* http://users.hol.gr/~dzach/microformats/openmap.gif
* http://users.hol.gr/~dzach/microformats/openmap.gif
-
* http://www.geotagicons.com/img/geotag-16px.png (taken from [http://www.geotagicons.com/ Geotag Icon Project])
+
* http://geotagicons.files.wordpress.com/2011/09/geotag_16.png (taken from [http://www.geotagicons.com/ Geotag Icon Project])
----
----
Line 116: Line 128:
== Examples in the Wild ==
== Examples in the Wild ==
 +
* [http://ripplefxinc.com RippleFxInc.com], its [http://blog.ripplefxinc.com Blog], [http://wiki.ripplefxinc.com Wiki] and ''All websites professionally produced'' use the hCard download-link / vCard integrated [10x12] icon; et. al.
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://zeroseis.com.br ZeroSeis] uses hCard download icon.
* [http://www.bayofislands.net/ Bay of Islands] uses hCard geo icon eg. in [http://www.bayofislands.net/accommodation/backpackers/mousetrap/ Moustrap Backpackers] page
* [http://www.bayofislands.net/ Bay of Islands] uses hCard geo icon eg. in [http://www.bayofislands.net/accommodation/backpackers/mousetrap/ Moustrap Backpackers] page

Current revision

These icons can be used to depict various microformats in webpages or on the desktop.

Contents

Creators

Accessibility

Publishers are advised to ensure that these icons are used in an accessible fashion, by including suitable "alt" attributes.

Icon designers are reminded that inability to distinguish between red and green is the commonest form of color-blindness .

Copyright

Unless otherwise noted, these icons are licensed under the Creative Commons Attribution-ShareAlike 2.5 license.

Icons

Web

A follow-up to Wolfgang & Chris' excellent work, Gabriel has created an extra-small (10x12) general use icon to indicate both a vCard download-link and the integration of an hCard. In contrast to the more attention-commanding graphics below, this icon intends to cleanly and elegantly integrate into footers or any in-line text (more appropriate for some site designs):


The first effort was completed by Wolfgang Bartelme and Chris Messina to create a series of web-friendly icons and buttons for microformats.

General

Based on the General Icon DevKit:

Icon Font:

Comments:

XFN

Comments:

VoteLinks

VoteLinks

Comments:

Geo

Can be used in the background-image CSS property, next to a geo microformat. It could also indicate that a map opens in a new window:


Mac

mf-icons-preview.png

These icons can be used for folders or files on your Mac. You can use a tool like Pixadex for managing and applying them.

Created by Chris Messina




PDF & SVG

pdffile.png svgfile.png

This logo looks pretty much as first icon of Chris’ set. You could open it in any bitmap or vector editing tools, such as Adobe Photoshop or Adobe Illustrator.

Created by Dmitry Baranovskiy

See also

Examples in the Wild

Icons was last modified: Monday, June 27th, 2016

Views