.jpg)
You can use Font Awesome icons anywhere on your website or blog or project. By just using some basic font awesome icons in HTML code and you have done. it sounds easy, actually, it is super easy, even an underage boy can do it in just 30 seconds. so, let us try it
{tocify} $title={Table of Contents}
But before you insert <i> element class, you must use Font Awsome CDN which is given below.
Here is an example:
Example:-
Font Awesome icons in HTML
Font Awesome icons are designed for use with inline elements, and I recommend that you stick with a consistent element in your project. If you want the easy and best method to implement font awsome icons in HTML then we recommend using <i> element with the Font Awesome CSS classes.But before you insert <i> element class, you must use Font Awsome CDN which is given below.
Here is an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-copy"></i>
</body>
</html>{codeBox}
Font Awesome icons in CSS
Font Awesome icons library gives 500+ free scalable vector icons. it is completely free for both personal and also for commercial use. Mainly designed for Bootstrap, these icons can be modified easily. You May increase/decrease the size of Font Awesome icons by defined their size using CSS.Example:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
i.mysize {font-size: 9em;}
</style>
</head>
<body>
<i class="fa fa-copy mysize"></i>
</body>
</html>{codeBox}
Defining icons color in CSS
here the process is the same just like above. but here we want to add color to font awesome icons using CSS.Example:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
i.mysize {font-size: 9em;color:blue;}
</style>
</head>
<body>
<i class="fa fa-copy mysize"></i>
</body>
</html>{codeBox}
List of Font awesome icon Categories
Font Awesome feeds 500+ icons in the following categories −- Video Player Icons
- Gender Icons
- Brand Icons
- Web Application Icons
- Hand Icons
- Transportation Icons
- File Type Icons
- Spinner Icons
- Form Control Icons
- Payment Icons
- Chart Icons
- Currency Icons
- Text editor Icons
- Directional Icons