Advertisement
Workshops

Any Old Icon: All Wrapped up!

by

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.

any-old-icon-finished-library

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.

any-old-icon-finished-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:

any-old-icon-finished-folder

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.

any-old-icon-finished-install

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

any-old-icon-finished-photoshop

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 (&#xe039;) 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.

any-old-icon-finished-html
This is just how Icomoon styles things, you can handle it however you want of course..

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.

any-old-icon-finished-encoding

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!

any-old-icon-finished-icons
Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Design & Illustration
    Web Design
    SVG Files: From Illustrator to the WebSvg thumb retina
    Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.Read More…
  • Web Design
    CMS
    Uber Aesthetics and ResponsivenessGhost rwd retina
    Welcome to the final part of our Ghost theme design tutorial series! In the previous two parts of this series we worked on the first half of styling our theme and laid the groundwork for responsive behavior. This fifth and final part finalizes our styling and completes the task of making our theme fully responsive.Read More…
  • Web Design
    HTML/CSS
    Create a Quick, Sticky MenuSticky menu retina
    During this quick tutorial we're going to implement a sticky menu with CSS, toggling its visibility with jQuery. It's the perfect way to give visitors social links, additional places within a network of sites, or even personalize settings.Read More…
  • Web Design
    Site Elements
    Your Logo, as a Web Font LigatureLigature retina
    Let's look at an alternative approach for displaying logos on a web page. Normally, you'll approach the challenge by using an <img> tag. Perhaps you'll use image replacement through CSS, perhaps you'll even venture into SVG files, but have you considered what's possible by designing your own web font ligature?Read More…