Skip to content

Instantly share code, notes, and snippets.

@theophani

theophani/Grey arrow data uri

Created March 9, 2011 09:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save theophani/861955 to your computer and use it in GitHub Desktop.
Save theophani/861955 to your computer and use it in GitHub Desktop.
Download ZIP
Grey arrow preceded by a space (#999, suitable for use with 12px font)
Raw
Grey arrow data uri
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAIAAABV+fA3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADJJREFUeNpi+I8KFi1aBGczMWCAxYsXQxhY5ODS2OUg0jjlYmNjmXBJYDcTIgEEAAEGAGysItsbwoS/AAAAAElFTkSuQmCC
To use as an arrow after a link:
a:after { content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAHCAIAAABV+fA3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADJJREFUeNpi+I8KFi1aBGczMWCAxYsXQxhY5ODS2OUg0jjlYmNjmXBJYDcTIgEEAAEGAGysItsbwoS/AAAAAElFTkSuQmCC'); }
About data URIs:
http://en.wikipedia.org/wiki/Data_URI_scheme
Awesome image to data URI converter:
http://www.abluestar.com/utilities/encode_base64/
Similar effect as:
a:after { content: ' \25B6'; color: #999; font-size: 12px;}
Other triangles to try:
http://unicodelookup.com/#triangle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment