CSS ICONS

Icon is a comprehensible symbol which is used to display something in the form of sign or symbol on the computer screen.

To add icons to the webpage we use icon library. These icon libraries create these icons using CSS so you can add other CSS properties to it too; like color,shadow,size etc. These icons are embedded in webpage by using HTML tags like <i> or <span>

There are many icon libraries which you can use like

• Font awesome icons
• Google icons
• Bootstrap icons

These icons libraries are added in the head section using link tag.

Font awesome icons

Add the icon library link in the head section of the webpage and use classes defined by font awesome in <i> tag or <span> tag. You can also add CSS style to the icons like color,shadow,font-size etc. To increase or decrease the size of icons use classes like : fa-xs,fa-sm,fa-lg,fa-2x,fa-3x, ... ,fa-10x.

Google icons

Add icon library link in head section of webpage and use class material-icons in <i> tag or <span> tag and name of the icon is mentioned in between the tag. You can also add CSS style to the icons like color,shadow,font-size etc. To increase or decrease the size of icons you can use CSS property font-size.

Bootstrap icons

Add the icon library link in the head section of the webpage and use classes defined by Bootstrap icons in <i> tag or <span> tag. You can also add CSS style to the icons like color,shadow,font-size etc. To increase or decrease the size of icons you can use CSS property font-size.