CSS Icons

Icons are small graphical representations of a program, command, or file. They are commonly used in user interfaces to help users quickly identify the type of content or action associated with a particular icon.

Icons can be made in various forms such as in images or font glyphs, and can be used in various contexts such as in web or mobile apps, desktop software, and operating systems.

How to use Font Awesome Icons

Font Awesome is a popular icon library that provides a wide variety of scalable vector icons that can be customized (size, color, drop shadow, etc.) using CSS. It can be used in various contexts such as in web or mobile apps, desktop software, and operating systems.

To use Font Awesome icons in HTML, you need to include the Font Awesome CSS file in the <head> section of your HTML document. You can do this by either linking to the Font Awesome CDN (Content Delivery Network) or by downloading and hosting the CSS file on your own server.

Here's an example of how to include the Font Awesome CSS file from the CDN:

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
</head>

Once you've included the CSS file, you can use an <i> tag with the appropriate class to add an icon to your HTML. The class name is the name of the icon you want to use, prefixed with fa-.

Here's an example of how to use the Font Awesome icon for a home:

<i class="fa fa-home"></i>

You can also use Font Awesome icons within other HTML elements such as <button>, <a>, <span>, etc.

<button><i class="fa fa-home"></i> Home</button>

You can also use classes like fa-lg, fa-2x, fa-3x, fa-5x, fa-7x, fa-10x to change the size of the icons.

<i class="fa fa-home fa-2x"></i>

You can refer to the Font Awesome documentation to know more on how to use it, also you can check the different icons available and the class name.

How to use Bootstrap Icons

Bootstrap Icons is a set of icons that are designed to work with Bootstrap, a popular open-source front-end framework. Bootstrap Icons are based on the open-source font, Font Awesome, and provides a wide variety of scalable vector icons that can be customized using CSS.

To use Bootstrap Icons in HTML, you need to include the Bootstrap CSS and JavaScript files in the <head> section of your HTML document. You can do this by either linking to the Bootstrap CDN (Content Delivery Network) or by downloading and hosting the files on your own server.

Here's an example of how to include the Bootstrap CSS and JavaScript files from the CDN:

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

Once you've included the Bootstrap CSS and JavaScript files, you can use the <i> tag with the appropriate class to add an icon to your HTML. The class name is the name of the icon you want to use, prefixed with bi-.

Here's an example of how to use the Bootstrap icon for a trash can:

<i class="bi bi-trash"></i>

You can also use Bootstrap icons within other HTML elements such as <button>, <a>, <span>, etc.

<button><i class="bi bi-trash"></i> Trash</button>

You can also customize the size of the icons by adding the classes bi-lg, bi-sm, bi-xs, etc.

<i class="bi bi-trash bi-lg"></i>

You can refer to the Bootstrap Icons documentation for more info.

How to use Google Icons

Google Icons, also known as Material Design Icons, is a set of icons designed and maintained by Google, based on Material Design Guidelines. These icons are open-source and can be used in various contexts such as in web or mobile apps, desktop software, and operating systems.

To use Google Icons in HTML, you need to include the Material Design Icons CSS file in the <head> section of your HTML document. You can do this by either linking to the Material Design Icons CDN (Content Delivery Network) or by downloading and hosting the CSS file on your own server.

Here's an example of how to include the Material Design Icons CSS file from the CDN:

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

Once you've included the CSS file, you can use the <i> tag with the appropriate class to add an icon to your HTML. The class name is material-icons and the icon name is the icon you want to use.

Here's an example of how to use the Google Icon for a home:

<i class="material-icons">home</i>

You can also use Google icons within other HTML elements such as <button>, <a>, <span>, etc.

<button><i class="material-icons">home</i> Home</button>

You can also customize the color and size of the icons by using CSS.

i.material-icons {
  font-size: 36px;
  color: #4caf50;
}

You can refer to the Google Icons documentation to know more on how to use it and also you can check the different icons available and their names.

CSS Basics