The icon on a website is handy. They provide meaningful information, providing links to email forms, telephone numbers, maps and more. There are two types of icons first is Decorative icons and second is Semantic icons. The Decorative icons are only being used for visual or branding. If they removed from the page, users still understand and can use the page. The second one is semantic icons. By using this icon you are convey meaning, like buttons, form elements, toggles, etc.
Icons can be added to an HTML page with the help of an icon library. All the icons in the library can be formatted using CSS. They can be customized according to size, color, shadow, etc. You have to put the name of the icon in the class of an HTML element to use it.
Following are types of icon library:
- Font Awesome Icons
- Google Icons
- Bootstrap Icons
Font Awesome Icons
Adding Icon using CDN Link
You can add font-awesome icons directly by using CDN link. Below code is CDN link.
Add this code in <head> section. It does not require any downloading or installation.
Adding Icon using Files Download
Simply, download the font-awesome files and copy that files in one folder, and give the path name of that folder in your code.
In the above example, we give the path name “css/font-awesome.css”. The font-awesome files are located in css file so we give css/font-awesome.
Using Font Awesome Pro
In Font Awesome Pro, a ton of new icons are available. And all are paid.
Following example show, how to add Font Awesome Pro.
Google Icons
To set Google icons following link is add in <head> section.
Bootstrap Icons
To set Bootstrap Icons add following link in <head> section.