If you read some of tutorials posted on the blog, you probably hear me talking about font awesome. This font, or rather CSS stylesheet, is used to generate icons on selected elements. If you want to use this CSS font, go on Font Awesome website. For online version hosted on CDN go to “Get Started” page and here copy and paste the link to CDN to head section of your page as regular stylesheet. Otherwise, just download the zip file and unpack it into your project folder. Next step is to include the downloaded font into your page for later use. You can either link the stylesheet into head section of html file or copy and paste its content into your default stylesheet.
Setting is done so let’s now take a look how it all works. To display icon it is necessary to add two classes to the element. First class is always the same – “fa”. It adds some default styling that shared by all icons. To have a little bit overview, here is a snippet from font awesome stylesheet.
CSS:
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
The think that may confuse you can be font-smoothing. This property tells your browser how it should render the icon. As you can see, it works only in Chrome, Opera (newer versions using webkit) and Firefox.
Second class you add to the element depends on what icon you want to display. For example, if the second class is “fa-bars”, menu or hamburger icon will be displayed.
HTML:
<i class="fa fa-bars"><i>
-note: In html4.01 the “i” tag was used to render text in italics. In HTML5 this is no longer applied and “i” tag is often used to render icon. You can as well use “span” tag if you want.
The size of icon is controlled by “font-size” property. The higher the font size will be the bigger the icon will get. Another way to increase size of the icon is to use classes which you can find in font stylesheet. These classes are following:
CSS:
.fa-2x {font-size: 2em;}
.fa-3x {font-size: 3em;}
.fa-4x {font-size: 4em;}
.fa-5x {font-size: 5em;}
As show, size is again controlled by setting “font-size” property. To change color of icon, use “color” property. Font stylesheet also include various additional options for modifying the icons like scaling up, animating, transforming, adding borders, pulling and pushing on the page.
Individual icons are displayed by using :before pseudo selector and by declaring “content” property with specific character code. For example CSS code for menu or hamburger icon mentioned before looks like this:
CSS:
.fa-bars:before {content: "f0c9";}
If you want to display some icon not directly on an element, but on its :before or :after pseudo element, you have to use the character code in “content” property instead of class. For example, to display icon on div with use of :before you have to declare “content” property with specific character code of icon and also set the “font-family” property to fontAwesome you can also change the size and color of icon as normal.
CSS:
div:before {
content: "";
color: #333;
font-family: fontAwesome;
font-size: 1.5em;
}
Summary
Using Font Awesome is very simple and quickly becomes natural if you will use it more often. Displaying icon through :before and :after pseudo elements is a bit more tricky, but still manageable and require just few more lines.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
Fonts are very important objects of a webpage. It is important to aligned and sized the fonts accordingly to the website needs. I am using online help such as tutorials and online generators for this. Like: http://www.generatecss.com/css/font/ Thanks for sharing this article, by the way. Really helpful!