Eric Hynds » icons http://www.erichynds.com Web Developer's Ramblings on JavaScript, jQuery, ColdFusion, MySQL, and other technologies. Mon, 02 Jan 2012 22:55:17 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 FamFamFam Silk Icon Set in Base64 Encoding http://www.erichynds.com/coldfusion/famfamfam-silk-icon-set-in-base64-encoding/ http://www.erichynds.com/coldfusion/famfamfam-silk-icon-set-in-base64-encoding/#comments Wed, 24 Feb 2010 15:05:26 +0000 Eric Hynds http://www.erichynds.com/?p=348
  • CFIMAGE resize after CFFILE upload
    • ]]>

    This one can be filed under both “total impractical” and “somewhat useful”. For those who haven’t heard of this trick before, base64 encoding enables you to embed binary image data directly into your HTML or CSS source. Therefore, instead of the browser requesting two files from the server – the CSS file and the image file – only the CSS file need be requested. There are a number of drawbacks/pros/cons to this approach: IE doesn’t support it, file size limitations, larger CSS files, inability to separately cache CSS vs. images, etc. etc., but if you feel the need to use FamFamFam Silk icon’s in base64, look no further.

    I use icons very liberally on all my projects; they’re classy and aid in usability. I typically start with a “.icon” class that configures the correct padding/background details for the element, followed by a “.icon-*” class, which sets the background-image property to that of the desired icon. For example, this CSS:

    .icon { background-position:left; background-repeat:no-repeat; padding:3px 0 3px 19px }
.icon-pdf { background-image: url(/images/icons/pdf.png) }

    Applied to this anchor element:

    <a href="#" class="icon icon-pdf">Download PDF</a>

    Produces:  Download PDF

    Can you dig it? The same .icon-pdf class in base64 looks like this:

    .icon-pdf { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC) }

    With this strategy in mind, I took each Silk icon and created a .icon-* class, where * is the name of the icon (underscores replaced with a hyphen). Each icon has a background-image property of the base64 encoded image.

    The Code

    The code to convert a directory of icons into base64 representation is very straightforward and revolves around ColdFusion’s fileReadBinary() and toBase64():

    <cffunction name="base64CSS" output="false" returntype="void">
	<cfargument name="imgdir" required="true" type="string" hint="the directory of images to base64 convert" />
	<cfargument name="destination" required="true" type="string" hint="the path and name to dump the css file" />
	<cfargument name="examples" required="false" type="string" hint="the path and name to dump the example html" />
	<cfset var images = "" />
	<cfset var icon = {} />
 
	<!--- read the image directory --->
	<cfdirectory name="images" directory="#arguments.imgdir#" />
 
	<!--- write our CSS and example files --->
	<cfset filewrite(expandpath(arguments.destination), "") />
	<cfif structkeyexists(arguments, "examples")>
		<cfset filewrite(expandpath(arguments.examples), "") />
	</cfif>
 
	<!--- loop through each image --->
	<cfloop query="images">
 
		<!--- read the image and convert it to base64 --->
		<cfset icon.data = toBase64(fileReadBinary(directory &'/'& name)) />
 
		<!--- famfamfam icons separate words with an underscore.  hyphens look better in CSS --->
		<cfset icon.name = replace(replace(name, "_", "-", "all"), '.png', '') />
 
		<!--- create the actual CSS and HTML --->
		<cfset icon.css = ".icon-" &icon.name& " { background-image:url(data:image/png;base64," &icon.data& ") }" />
		<cfset icon.html = '<div><span class="icon icon-'&icon.name&'">' & icon.name & '</span>' />
 
		<!--- append to the css file --->
		<cffile action="append" file="#expandpath(arguments.destination)#" output="#icon.css#" />
 
		<!--- append to the examples file --->
		<cfif structkeyexists(arguments, "examples")>
			<cffile action="append" file="#expandpath(arguments.examples)#" output="#icon.html#" />
		</cfif>
	</cfset></cfloop>
</cffunction>
 
<cfset base64CSS("/home/ehynds/Assets/icons/silk/", "icons.css", "examples.htm") />

    I started by creating a “base64CSS” function which accepts three arguments: a path to a directory of images, the CSS file to generate, and the examples HTML file to generate. cfdirectory reads the image directory, the two CSS/example files are created, and then I loop through each image in the directory. Each image is read as binary data and converted to base64, given a name (separated with hyphens instead of underscores), and the CSS and HTML is generated. Finally, the CSS is appended to the CSS file and the HTML to the examples file.

    Simple, right? Does anyone else use some kind of icon class? I’d like to see other approaches!

    Related posts:

    1. CFIMAGE resize after CFFILE upload

    ]]>     http://www.erichynds.com/coldfusion/famfamfam-silk-icon-set-in-base64-encoding/feed/ 2