tutorialstonight logo
A Platform To Learn To Code

CSS ICONS



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


HOME

SERVER

SEARCH

CLONE

DOWNLOAD

TREE

How to add icons

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.

Example

Run the code

OUTPUT:



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.

Example

Run the code

OUTPUT:
home attachment search favorite computer



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.

Example

Run the code




BOX

BOX