CSS Icons

CSS Icons

We all love icons and definitely want to add it 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 icon to HTML page

To add icon 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 icon to you 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 icon to your HTML page, there is no need to download and install any file. Add the following line in <head> to add font awesome icon,

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

Here’s 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 and as a web font. 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 icon to your HTML page, there is no need to download and install any file. Add the following line in <head> to add Google icon,

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

Here’s 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.

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

We work to create free tutorials for all.

No Comments

Post A Comment