TUTORIAL HOME
CSS Icons
❮ Previous Next ❯
How To Add Icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.
Add the name of the specified icon class to any inline HTML element (like or ).
All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.)
Font Awesome Icons
To use the Font Awesome icons, add the following line inside the 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“>
Note: No downloading or installation is required!
Example
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css“>
Result:
»
Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside the section of your HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css“>
Note: No downloading or installation is required!
Example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css“>
Result:
»
Google Icons
To use the Google icons, add the following line inside the section of your HTML page:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons“>
Note: No downloading or installation is required!
Example
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons“>
cloud</i>
favorite
attachment
computer
traffic
Result:
»
For a complete list of all icons, visit our Icon Tutorial.
❮ Previous Next ❯
shahzade bau 