IcoFont Gives You 2100+ Free Icons in a Single Font File

With the rise of web fonts and embeddable CSS fonts, it’s much easier nowadays to create truly unique websites from scratch.

The newest trend is icon fonts that are usually smaller than images, much easier to scale, and they’re crystal clear on all screen sizes (including retina). You can find plenty of these icon fonts online but IcoFont really takes the cake.

This free icon typeface comes with over 2,100 icons, all bundled up into a single font file.

Free Web Font Services – Compared

.no-js #ref-block-post-16817 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/webfont-comparison.jpg”); }

Free Web Font Services – Compared

All these years, websites are restricted to typical fonts such as Arial, Georgia, Times and so on. This…Read more

You can download the raw source with all icons or only certain icon “families” such as currency, business, social, or mobile UI (among many others).

The website acts like an online documentation for all these icons, so you can copy/paste the codes into your site quickly. IcoFont icons work much like FontAwesome icons which, for instance, are used by default in the Bootstrap framework.

Everything works through the <i> element that requires two CSS classes:

  1. the default IcoFont class
  2. a class for each type of icon

For example, to add a castle icon to your document you’d add something like this to your layout:

<i class="icofont icofont-castle"></i>

You can technically add these icons to any element you like but the default code from IcoFont relies on <i> elements.

IcoFonts homepageIcoFonts homepage

Note this library should not be confused with a program called Icofont which is not a library at all but an interface for managing icon fonts inside your RoR applications. Since this program has the same name as the IcoFont library it can be tough Googling for more info.

This library is still very new and I can’t find it on GitHub or anywhere else on the web. But, if you’re looking for more info I highly encourage visiting the website and downloading a copy. You’ll find all the proper source code right there and you can even browse all icons by category to see what’s in the set.

A Guide to: Better and Sharper UI Icons with Web Fonts

.no-js #ref-block-post-15616 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/webfont-icons.jpg&#8221;); }

A Guide to: Better and Sharper UI Icons with Web Fonts

If you are familiar with using bitmap image formats (like PNG and GIF) to display icons on a…Read more

Source: http://www.hongkiat.com/blog/icofont-free-icon-font-library/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s