Any Old Icon: All Wrapped up!

Any Old Icon is complete, 70 icons in all! Thank you to everyone who contributed, you can be proud to have participated in the most random icon set on Earth! For the rest of you, here’s how to download and use the set..

Quick Hat-Tip to Icomoon

This really wouldn’t have been so easy to realise without the genius of @Keyamoon‘s Icomoon webfont app. Uploading a pile of SVGs and outputting as a neat, usable webfont package has never been easier! And I’m very happy to report that Any Old Icon is now featured within the Icomoon library for everyone to use.

Get it. Use it.

I bet you’re itching to use this icon set in your next project, well here’s how to do it..

Download

To begin with, head on over to the project page http://tutsplus.github.io/Any-Old-Icon/. Browse the icons if you wish (I’ll wait) then head back and hit the big download button.

Files

You’ll end up with a folder called “Any-Old-Icon-Master”, zipped up courtesy of GitHub, which looks a bit like this:

In it you’ll find the font files, an index.html demo web page, a style.css file, some other stuff and an “svg” folder which contains all the original vector artwork.

Installing the Fonts on Your System

If you’d like to be able to use the fonts in Photoshop, Illustrator and so on, double click the .ttf Truetype file and it will (should) automatically install to your system, whatever platform you’re using.

You’ll then be able to select the “any-old-icon” font from within your favorite design application. Go nuts.

The Web

The demo index.html file is what Icomoon automatically churns out and illustrates a couple of ways you can use webfont icons on the web. Take a look at style.css and you’ll see the necessary bits and bobs.

To begin with, the @font-face rules, which assign a font family name (any-old-icon) and point to all the font files which you’ll need to upload to a web server. Make sure all the paths are correct, relative to the css file.

@font-face {
	font-family: 'any-old-icon';
	src:url('fonts/any-old-icon.eot');
	src:url('fonts/any-old-icon.eot?#iefix') format('embedded-opentype'),
		url('fonts/any-old-icon.woff') format('woff'),
		url('fonts/any-old-icon.ttf') format('truetype'),
		url('fonts/any-old-icon.svg#any-old-icon') format('svg');
	font-weight: normal;
	font-style: normal;
}

With that set, you can now use the font files in a couple of ways. The next chunk of code in style.css looks like this:

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'any-old-icon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

It sets up the styles to use data-attributes, applying a pseudo-element to any element on your page which has a data-attribute of data-icon. For example, you may have:

<span data-icon="&#xe039;">This span will have a :before element applied!</span>

In which case, the value within the data-icon, an HTML entity () will be injected into the :before pseudo element. The any-old-icon font family is applied to this :before element, so the correct icon is displayed.

Or..

The next chunk of CSS applies indvidual classes for each icon (pretty big chunk of code). Then each class has further styling, applying the pseudo element in a similar way to before, but representing the icons using escaped unicode entities, which is necessary in CSS.

.juan-ortiz-zaforas-plug-c-female:before {
	content: "\e01a";
}

Lastly..

What you may prefer to do, though which arguably incurs a small performance hit, is to apply the font-family to a global selector like this:

.icon {
	font-family: 'any-old-icon';
}

Which then points to the following:

<span aria-hidden="true" class="icon">&#xe039;</span>

Slightly muddying up the markup, but hey.

Note: that aria-hidden="true" is useful for hiding the markup from screenreaders and other assistive technologies. The character has little meaning without the icon, so could cause confusion.

Changing the Character Mapping

If you prefer to use different characters with these icons, head on over to Icomoon, use Any Old Icon from the library there (or upload the font files provided with our own source), then assign whichever characters you wish before downloading the package.

One Last Time

Thanks again to everyone who took part! If your icon didn’t make it into the final cut, I’m sorry, but I have a feeling we’ll be running more of these in the future. Enjoy the icon set!