CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

How to use Icons


How to Add Icons to Website

Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <i> or <span> which allow for an abbreviated markup when sitting along-side text.

There are many icons libraries available and most common used libraries are:

  • Font Awesome
  • Bootstrap Glyphicons
  • Google icons

All the icons in the icon libraries are scalable vector icons that can be customized with CSS.


Font Awesome 5 Icons

To use the Font Awesome 5 icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
Run code

For a complete list of ALL Font Awesome 5 icons, visit our Font Awesome 5 tutorial.



Font Awesome 4 Icons

To use the Font Awesome icons 4, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Run code

For a complete list of ALL Font Awesome 4 icons, visit our Font Awesome 4 tutorial.


Bootstrap 3 Glyphicons

To use the Bootstrap 3 glyphicons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Run code

For a complete list of ALL Bootstrap glyphicons, visit our Bootstrap Glyphicons tutorial.


Google Icons

To use the Google icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Run code

For a complete list of ALL Google icons, visit our Google Icons tutorial.