Know those fun little icons that you see around the web, you know, like an envelope for email or a house for the home page? Wanna know how to get them into your web design? It’s really simple through a resource available on GitHub called Font Awesome.?Font Awesome is designed for Twitter Bootstrap, but can be used directly in your CSS as well.
Check out the icons available at the Font Awesome website to get a feel for what’s available and what you might like to incorporate into your design. Not only can you see samples of the icons, but the “code names” (no really, the names you’ll need for your code) are also on display.
According to the website, it’s a simple process to make them available to your website.
- Copy the Font Awesome font directory into your project.
- Copy font-awesome.less or font-awesome.css into your project.
- Open your project’s font-awesome.less or font-awesome.css and edit the font url to ensure it points to the right place by putting the following code in the <head> of your html:
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
