To add fontawesome icons in your HTML web page, please add below given link in between <head> </head> section of your HTML web page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
You can search the icon from below text box, click on icon and copy the code and paste in your HTML file
Font Awesome gives us scalable vector icons that can be easily customizeable of their size, color, background-color etc. Scalable vector means it does not loses his graphics at any size. Font awesome uses to insert an icon. It is an online platform uses by a user to get an icon as per their desire. It is widely useable platform uses by millions of users. It is easy to use it doesn't require CSS and javascript to implement it. Generally it is uses by website developer, software developer, content writer etc.
Font awesome makes our response time better because if we use images in place of icon than browser has to load multiple images and because of that our response time getting increased. Font awesome gives us an opportunity to show their content interactive and user friendly. For example if we write simply phone number without adding icon it may be confusing for the user to identify but in the above case if we add icon of phone then it clarify the user to understand that It is a phone number.
Font awesome also makes our content beautiful. For example In menu bar if we write a user than it looks preety odd. but instead of writing of user if add user icon than our page looks beautiful or interactive.
The current version of font awesome found much safer than older version. It provides security on cross-site scripting, data injections etc. Font awesome is a widely useable platform which gives an opportunity to uses varieties of icons on many topics such as technology, logo, sports etc. So we can say that the current version of font awesome is safe.
In simple we say that The time integration is when we want to intergrated the icon. Generally it integrated in a content where we want to specify. Suppose if we write an email id than it is good to use icon because it clarify the user that it is an email id. In similar way it useful in phone number, address, message etc.
we have divided to integrate font awesome in two steps. First step : We have to insert a link in head section, but works only when the internet is on. There is also another way where internet connection does not require. In that process we have to downloads a file which are available on font awesome than copy that file and paste in our font folder and css folder link that file in our HTML through link tag. Second step : Go to the website and search the desired icon and copy the code and paste it in our HTML page.
Font awesome gives us lincense in free. We can use it freely in our commercial projects, website. We can also uses freely in apps. We can embed in mobile and desktop app.
Font awesome works almost in all browser. It works in all browser which are generally uses such as chrome, firefox, opera etc. It does not works in a browser such as IE etc.
The size of font awesome is increases or decrease with the use of font-size property. In this property we give the value, The value can be given in px, rem, vh etc. for example : font-size:20px;. It is useful for CSS.
If we want to increase or decrease the size of icon through HTML than we are using style property It is given in icon tag. The property and value are same.
<i style="font-size:20px;" class="fa fa-facebook"></i>Result :
<i style="font-size:24px;" class="fa fa-facebook"></i>Result :
<i style="font-size:28px;" class="fa fa-facebook"></i>Result :
<i style="font-size:32px;" class="fa fa-facebook"></i>Result :
<i style="font-size:64px;" class="fa fa-facebook"></i>Result :
<i style="font-size:128px;" class="fa fa-facebook"></i>Result :
The color of font awesome is given with the use of color property. In this property we give the value, The value can be given in color name, rgb, rgba etc. for example color:blue;.
If we want to give the color of icon through HTML than we are using style property It is given in icon tag. The property and value are same.
<i style="color:blue;" class="fa fa-facebook"></i>Result :
<i style="color:green;" class="fa fa-facebook"></i>Result :
<i style="color:brown;" class="fa fa-facebook"></i>Result :
<i style="color:orange;" class="fa fa-facebook"></i>Result :
The background color of font awesome is given with the use of background-color property. In this property we give the value, The value can be given in color name, rgb, rgba etc. for example background-color:red;.
If we want to give the background color of icon through HTML than we are using style property It is given in parent tag. The property and value are same.
<i style="background-color:blue;color:white;" class="fa fa-facebook"></i> Result :
<i style="background-color:green;color:white;" class="fa fa-facebook"></i>Result :
<i style="background-color:brown;color:white;padding:5px;" class="fa fa-facebook"></i> Result :
<i style="background-color:red;color:white;padding:5px;" class="fa fa-facebook"></i> Result :
In above two example there is padding to increase the size of background.
We can create circle in font awesome through css property. We have to use some properties with the help of this properties and their values we create a circle. These properties are as follows :-
background-color : Here value can be through color name, rgb, rgba etc.
height : Here value can be given in px, rem, vh etc.
width : Here also value can be given in px, rem, vh etc.
line-height : Here also value can be given in px, rem, vh etc.
text-align : Here we give value center for putting in center.
border-radius : Here also value can be given in px, rem, vh, percentage(%) etc.
for making circle the combination of values is necessary so, the combination is line-height, height, width is same and border-radius is 50%.
If we want to create circle through HTML than we are using style property It is given in parent tag. The property and value are same.
Example : <i style="background-color:red;color:white;height:40px;width:40px;line-height:40px;border-radius:50%;text-align:center;" class="fa fa-facebook"></i> Result :
<i style="background-color:green;color:white;height:40px;width:40px;line-height:40px;border-radius:50%;text-align:center;" class="fa fa-facebook"></i> Result :
<i style="background-color:orange;color:white;height:40px;width:40px;line-height:40px;border-radius:50%;text-align:center;" class="fa fa-facebook"></i> Result :
<i style="background-color:brown;color:white;height:40px;width:40px;line-height:40px;border-radius:50%;text-align:center;" class="fa fa-facebook"></i> Result :