Icons on the website – use Font Awesome!

Website containing only text is a relic, nowadays graphics dominate, articles are supported by better or worse quality photos or icons – the latter enrich the whole website giving a modern look to the menu, scoring and short notes. If you don’t want to create dozens of small pictures from scratch, Font Awesome comes to your aid!

Your own icons for the site – is it worth it?

Creating your own icons can be a great fun; it will surely make the website deviate from template solutions and attract the attention of recipient. Such a solution will work well in highly individualized projects, for which commonly available libraries of icons are not enough. You have to remember that creating your own set of icons is not only an operation requiring time and programs for vector drawing, it is primarily graphic skills and fantasy, and thus it becomes necessary for a graphic designer. Ready-made icon libraries meet the needs of most web developers, not only for the above reasons, but also because their symbolism is widely recognized.

Font Awesome icons library

The best known and most popular icon library is Font Awesome, but its fame is not only due to the fact that some of the available images are free of charge (there is also a possibility to buy PRO option, which is extended by the possibility of using additional icons). Simple in their construction images are easy to associate with the words that define them, searching for an icon we are interested in is trivial, as well as using it in the text or as a coloring of menu items. The main advantage of implementing fa-icons is related to the part of name – yes, font means that fa-icons is a font and not an image, so it hardly ever weighs and provides high quality graphics that look great on any device, that’s why responsive web developers love fa-icons.

One icon, multiple options

An undeniable advantage of Font Awesome is the ability to modify icon to suit your needs. Various amenities implemented by the service allow you to change the size, style, color or orientation of the icon – everything is done by adding an appropriate phrase to the code of image. Our own graphics used as icons do not provide such a quick way to make changes, each time we have to reduce or enlarge them and upload them back to the server and do not guarantee correct display on different types of devices. Probably now you are wondering how to modify fa-icons? Below are the answers to this question. - yes, it's Font Awesome.

Table of Contents:

How to add fa-icon in text?
How to change fa-icon style?
How to enlarge fa-icon?
How to change fa-icon color?
How to rotate fa-icon?
How to create animated fa-icon?
How to provide the same dimension icons?
Overlapping fa-icon
Use of fa-icons to create the pointed list
How to use fa-icon to quote?

How to add fa-icon in text?

Entering Font Awesome icons into the text is very simple. Just type in a fragment of code responsible for displaying fa-icon:

*Sometimes it is necessary to insert a space between , e.g. in Joomla templates based on SP Page Builder.

In older versions of fa-icons there was one style, no additional differentiation between line thicknesses, which is “drawn” by the icon, so the class looked like this:

How to change fa-icon style?

Recently Font Awesome have made a differentiation of icon display options by entering variables for display: regular, solid, light. Thus fa-icon ceased to be “fa” – old, different names of icons for different styles have been unified e.g. qlock-o has become qlock, and the individual look is obtained in classes:

fas – fa solid - most free fa-icons is based on this class

far – fa regular - there are many free icons of this class

fal – fa light - icons for this option are available in paid version Font Awesome Pro

You can still meet with class: fab, it means fa brands, i.e. icons of brands: twitter, facebook, github.

How to enlarge fa-icon?

Changing the size of Font Awesome icons may seem quite complicated, but this is only an appearance, because the library has its own fa-icon size designation:

fa-xs 

fa-sm 

fa-lg 

fa-2x 

fa-3x 

fa-4x 

fa-5x 

fa-7x 

fa-9x 

If you want to enter an icon in its standard size (unset), you remain with the version without class extension:

How to change fa-icon color?

Changing the color of Font Awesome icon is the same as changing the font color, so you just need to applied “style color” in the class:

There is also a possibility of color inversion, especially useful when you want to overlay two black icons. The use and class record can be found below in the context of overlapping icons.

How to rotate fa-icon?

If, for some reason, you want to rotate icon fa by 90, 180 or 270 degrees or get a mirror image of it, it is enough to use the class created for this purpose:

fa-rotate-90 - 90 degrees 

fa-rotate-180 - 180 degrees 

fa-rotate-270 - 270 degrees 

fa-flip-horizontal - horizontal reflection 

fa-flip-vertical - vertical reflection 

How to create animated fa-icon?

Web browsers supporting CSS3 can display our icon as animated, i.e. it can rotate smoothly or pulsating. This is achieved by means of classes:

fa-spin - spin 

fa-pulse - pulse 

How to provide the same dimension icons?

Icons fa have different widths and heights, so the lists created from them may be “unequal”, but this can be remedied by another class:

fa-fw - fixed width

Here is an example of icons of different sizes:

And here applied class fa-fw:

Overlapping fa-icon

An interesting feature is the possibility of "combining" Font Awesome icons, i.e. overlapping one icon on the other. In this way we can create ban signs, put an icon in a circle or square. Usually when using this function, you also need the option to reduce one of fa-icon. For this purpose there is a fa-stack class and with the option of changing the size of fa-stack-1x for icons of standard size and fa-stack-2x for a larger icon. The use of fa in this way is possible through . If you have two black icons, it is necessary for icon "on top" to give a fa-inverse class, which will change its color to white. This class can also be used in other cases instead of color style, of course if you want to get white.

fab fa-facebook-messenger inside far fa-square with use of fa-stack:

 

fab fa-facebook-messenger inside far fa-circle with the use of fa-stack and color inversion fa-inverse on icon facebook:

 

Overlapping fa-icons can also be used to create ban signs, by adding a text-danger class the icon will turn red. In the example fas fa-fire inside fa-ban with the use of text-danger:

 

One more example, this time fas fa-ban applied to fas fa-dog without text-danger, but enlarged – in the above examples the class used was: span class="fa-stack fa-lg", in the following span class="fa-stack fa-5x":

 

Use of fa-icons to create the pointed list

Font Awesome icons can also be used to point out elements of the list – we can create a list with "check" icons or other icons – if the images differ in size, it is worth adding to them a class setting a constant width of fa-fw. In order to create a list, we add fa-ul class to <ul> mark, and inside each pointing marker <li> we place a standard code with fa-li class icon:

You can use fa-icons of check type to point out the list.

<ul class="fa-ul"> <li>You can use</li> <li>fa-icons of check type</li> <li>to point out</li> <li>the list</li> </ul>

You can use
fa-icons of check type
to point out
the list

Instead of "check" marks you can use any Font Awesome icons.

<ul class="fa-ul"> <li>Instead of "check" marks</li> <li>you can use</li> <li>any</li> <li>Font Awesome icons</li> </ul>

Instead of "check" marks
you can use
any
Font Awesome icons

How to use fa-icon to quote?

Usually, in the script of website, classes responsible for quotations are added to make everything look nice, but sometimes it happens that the web developer has not programmed us additional PRO functions, then we can use fa-icon to quote. For this purpose, classes have been created that allow you to place an icon on the left or right side of text:

fa-pull-left – sets the icon next to text on the left side

fa-pull-right – sets the icon next to text on the right side

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

In addition, we can use a class that will set a bright frame around fa-icon:

fa-border - frame around the icon

Here are the standard options for using Font Awesome, but if you want and have skills, you can combine fa-icons with Bootstrap and use them to enrich not only texts, but also menus or forms.

Create a responsive website – Order a quote