Icon in CSS

This article introduces a few ways to add icons to HTML pages.

How to add icons

The easiest way to add icons (icons) to HTML pages is to use the icon library. Just like Font Awesome, just add the name of the icon class to any inline HTML element (as well). All the icons in the icon library below are in vector format that can be scaled in CSS (size, color, shadow .)

Font Awesome Icon

To use Font Awesome's icon, add the following line to the section in the HTML page. You do not need to download or install anything.

 

Example of the icon with Font Awesome















Picture 1 of Icon in CSS

Images of icons in the example on the browser

Bootstrap Icon

To use Bootstrap's icon, add the following line to the section in the HTML page. This way there is no need to download or install anything.

 

Example icon with Bootstrap















Picture 2 of Icon in CSS

Bootstrap is a popular choice to get icons for HTML pages

Google Icon

To use Google Icon, add the following line to the section in the HTML page. As with the above two ways, you do not need to download or install anything.

 

Example Google Icon








cloud
favorite
attachment
computer
traffic


Picture 3 of Icon in CSS

Google also has its own icon library for developers

Previous post: Font in CSS

The following article: Path in CSS

Update 25 May 2019
Category

System

Mac OS X

Hardware

Game

Tech info

Technology

Science

Life

Application

Electric

Program

Mobile