Freebie: gonzocons 2.0 (Icon Font)

Fonts

A free icon font containing 100 line icons for web designers and developers called “gonzocons 2.0“, works perfectly and easy to embed in your apps or web projects. Icon fonts, just like other web fonts, use the CSS @font-face rule to display icons in web browsers.

The download package (.ZIP file) includes all the various web font formats (.ttf .eot .svg & .woff files) needed to embed this icon font via the CSS @font-face declaration. Also included are the HTML/CSS codes and the single .SVG’s. The necessary CSS you need for @font-face, you can find in the gonzocons.css file from the download package, copy this into your main stylesheet.

Also you need to copy the various web font formats into your ‘fonts’ directory in the root, if you don’t have a ‘fonts’ directory, just create one in the root of your website or WordPress theme.

You can now insert these icons into any text area such as a post, page, or widget using two different methods (using inline codes in HTML or using pseudo-elements in CSS to place the icon as generated content).

HTML
<!-- Use the following if you want to use class selectors--<
<span class="icon-download"></span>

or

<!-- Use the following if you want to use data attributes.--<
<span data-icon="\e91c"<</span<

CSS
.icon-download:before {
    content: "\e91c";
    font-size: 24px;
    color: #318EC3
}
<!-- Change the apearance on hover in CSS --<
.icon-download:hover:before {
    opacity:0.5;
    color: #666;
    font-size: 32px;
}

But you can also use the .SVG-files to place a single icon on your website or (web) app, using the img property, like this:

HTML
<img src="icon-download.svg" alt="Yeah, grab this stuff now!"<

The line icons look crisp at any size and will shine on any high-resolution display. Using @font-face you can customize your icons in size, color and any style available in CSS. This open source icon font is designed to be legible down to 12 pixels.

For even more convenience, I have provided a demo page, with the class name and html code of every single line icon.

Demo   Download

License Agreement

gonzocons 2.0 is licensed under the MIT Licence and its fonts are under the Open Font License. All products may be used for personal or commercial purposes, however they may not be redistributed or sold.