How To Use Font Awesome Icons In HTML

bySUCCESS BETA •
0
Here we will discuss the basics of how to use Font Awesome icons in HTML or website or project using short class names for different icons. we will also discuss how to add Font Awesome icons in CSS, Font Awesome CSS content code, font Awesome Unicode in CSS, and more.






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}

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 −

  1. Video Player Icons
  2. Gender Icons
  3. Brand Icons
  4. Web Application Icons
  5. Hand Icons
  6. Transportation Icons
  7. File Type Icons
  8. Spinner Icons
  9. Form Control Icons
  10. Payment Icons
  11. Chart Icons
  12. Currency Icons
  13. Text editor Icons
  14. Directional Icons
To utilize any of these icons, you have to substitute the class title in the schedules given in this branch with the class title of the preferred icon. I hope now You can Use Font Awesome Icon in HTML.

Tags:

*

Post a Comment (0)
Previous Post Next Post