Meet Devicons, an iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.

Download

The font

Usage & FAQs

Getting started *

Setting up Devicons can be as simple as:

  1. Download and extract the repository
  2. Copy the devicons.css to your project
  3. Copy the fonts folder to your project
  4. Ensure the font urls within devicons.css properly reference the fonts path within your project.
  5. Include a reference to the devicons.css file from every webpage you need to use it.

Putting an icon is as easy as adding <span class="devicons devicons-bing_small"></span> into your document. On the Cheatsheet section below you can find all the available classes, as well as the HTML escape character of each icon.

But I want to create use my own styles? *

If yout are a little familiar with CSS taking a look at devicons.css will make things clean and clear. You can use Devicons into your custom made styles extending your defintions as:

. Or even use the HTML escape characters <span class="my_own_class">&#xe624</span>

Sass to the rescue *

If you are an SASS enthousiast you can include Devicons into your project using : @import 'devicons';. Keep in mind that the Sass version of Devicons use nested lists.If you feel unfamiliar with the whole Sass-list-thing, take a look at this wonderful article written by Hugo Giraudel

What's the browser support? *

* up to 8

*

*

*

* All the modern mobile browsers

* IE 8 partially supports :pseudo-elements . Using escaped HTML or a Javascript implementation will solve the problem.

* Opera Mini might need SVG fallaback

How about IE 7? *

Devicons support IE as well using a special CSS file, Javascript and polyfills. Just add :

into your project's <head> section.

How about SVG or even image fallbacks? *

SVG and PNG sprites are also included in the project, use them wisely.

What's the smartest way to detect an SVG or image fallback? *

Modernizr.js is your friend!

My font seems rough/ stretched, what happened? *

Different browsers and operating systems, tend to render fonts differently. Double check your CSS files for Devicons' declaration: If the problem insists check out for some suggested solutions.

My icons are chopped off on the top!! *

Double check your CSS declared line-height

My icons seem to small! *

Try increasing font-size. You can go up as much as needed. There is no pixel loss as Devicons is vector based.

Cool, how can I use Devicons?*

Devicons is Open source (MIT Licence). You may use the icon set as you want. You can create a list with your skills, use the the icon set for your next presentation or even print some badass stickers.

Sweet! Will you also include UberCool's logo on any upcoming release? *

Drop me a line sayhi@vorillaz.com and I'll do my best mate :]

Cheatsheet

Class:
before: content
HTML:

About

Designed, handcrafted & coded by Theodore Vorillas. Licenced under MIT Licence

Shipped using IconMoon App, Adobe Illustrator, Sublime Text 3 and GitHub

Wanna talk? sayhi@vorillaz.com