CSS Icons
Icons can enhance the visual appeal and usability of a website or application. They provide a visual representation of various elements and help users quickly understand their purpose. There are several popular icon libraries available that make it easy to add icons to HTML pages.
Using the icon library is the easiest way to add icons to our HTML page. It is possible to format the library icons by using CSS. We can customize the icons according to their color, shadow, size, etc.
By using these icon libraries, you can easily add and customize icons in your HTML pages without the need for manual image handling or downloading individual icon files. Simply include the library files and use the provided class names to insert icons into your HTML elements.
Here are some commonly used icon libraries:
Font Awesome Icons
Font Awesome is a popular icon library that provides a comprehensive collection of icons. It offers both free and paid icon sets. To use Font Awesome Icons, you need to include the Font Awesome CSS and use the appropriate class names to add icons to your HTML elements. Or To use this library in our HTML page, we need to add the following link within the <head></head> section.
Input:-
Output:-
Bootstrap Icons
Bootstrap Icons is a free icon library provided by the Bootstrap framework. It offers a wide range of icons that can be easily integrated into your HTML using the Bootstrap CSS framework. To use Bootstrap Icons, you need to include the Bootstrap CSS and the Bootstrap Icons SVG sprite in your HTML file. Similar to the font awesome library, we can add the bootstrap icons in our HTML page using the link given below in the <head></head> section.
Input:-
Output:-
Google Icons
Google Icons (formerly known as Material Icons) is an icon library provided by Google. It offers a set of material design icons that can be easily used in your HTML pages. To use Google Icons, you need to include the Google Icons CSS and use the appropriate class names to add icons to your HTML elements. Similar to the above libraries, we can add it to our HTML page simply by adding the link given below in the <head></head> section.
Input:-
Output:-
