CSS Icons

We all love icons and definitely want to add them to our website. Various icon libraries are available, which allow you to add icons. In the article, we will learn about CSS Icons.

Example of CSS icons

Here are the scalable vectors, which are the icons that can be customized with CSS,

  • Font Awesome Icons
  • Google Icons
  • Bootstrap Icons

Before implementing the above icons, let us see how to easily add icons to HTML.

How to add icons to an HTML page

To add icons to your HTML page, there is no need to download and install any file. Get the icon library, by adding the following line to <head>:

Here’s the code, which you can use to add icons to your HTML page,

Here’s the output,

Icons Example

Let’s now understand Font Awesome and Google Icons.

What are Font Awesome Icons

Font Awesome provides font and icons toolkit. Here are some of the icons from a library of icons provided by Font Awesome,

Font Awesome IconsImage credit: Screenshot from fontawesome.io

To add icons to your HTML web page, there is no need to download and install any file. Add the following line in <head> to add font awesome icons,

After that, you need to add the name of the specified icon class to the HTML element <i> or <span>,

The following is an example to add icons and style them:

Here’s the output,

Font Awesome Icon example and styling output

Let us learn about Google Icons.

What are Google Icons

Google Icons provides over 900 material system icons, which are available for users in different sizes and as web fonts. Here are some of the icons from a library of icons provided by Google Material Icons,

Google IconsImage credit: Screenshot from material.io/icons

To add icons to your HTML page, there is no need to download and install any file. Add the following line in <head> to add the Google icon,

After that, you need to add the material-icons class to the HTML element <i> or <span>,

The following is an example to add Google icons and style theme:

Here’s the output,

Google Icon example and styling output

In the above example, we saw how to add icons to an HTML web page with examples.

CSS Background
CSS Outline
Studyopedia Editorial Staff
Studyopedia Editorial Staff
[email protected]

We work to create programming tutorials for all.

No Comments

Post A Comment








Discover more from Studyopedia

Subscribe now to keep reading and get access to the full archive.

Continue Reading