Add Icons In CSS Using Font Awesome,Bootstrap & Material Icons
Add Icons In CSS
We can add icons to our HTML page by using icon libraries such as Font Awesome, Bootstrap Icons, and Material Icons by Google.
To add icons we should use HTML inline elements e.g. <span> or<i>.
Add Font Awesome Icons
To use Font Awesome icons we need to include the library on our HTML page using the <link> tag with its href attribute containing the <url> of the library.
The <link> tag should be inside the <head> element.
<!DOCTYPE html> <html> <head> <title> Try It Yourself </title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> </head> <body> <i class="fa fa-android"></i> <i class="fa fa-anchor"></i> <i class="fa fa-save"></i> <i class="fa fa-file"></i> <i class="fa fa-warning"></i> <i class="fa fa-heart"></i> <p><b> Note! </b> This demo requires internet connection. </p> </body> </html>
Output Of font awesome icon
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Find all free Font Awesome icons here: Font Awesome Icons
Add Bootstrap Icons
To use Bootstrap icons we need to include the library (it’s a CSS library) to our HTML page using the <link> tag with its href attribute containing the <url> of the library.
The <link> tag should be inside the <head> element.\
<!DOCTYPE html> <html> <head> <title> Try It Yourself </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <i class="glyphicon glyphicon-ok"></i> <i class="glyphicon glyphicon-arrow-left"></i> <i class="glyphicon glyphicon-arrow-right"></i> <i class="glyphicon glyphicon-eye-close"></i> <i class="glyphicon glyphicon-warning-sign"></i> <i class="glyphicon glyphicon-wrench"></i> <p><b> Note! </b> This demo requires internet connection. </p> </body> </html>
Output Of Bootstrap icon
50+ HTML, CSS & JavaScript Projects With Source Code
Find all Bootstrap’s icons here: Bootstrap’s Icons
Add Material Icons
To use Material Icons we need to include the library (it’s a CSS library) to our HTML page using the <link> tag with its href attribute containing the <url> of the library.
The <link> tag should be inside the <head> element.
<!DOCTYPE html> <html> <head> <title> Try It Yourself </title> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> </head> <body> <i class="material-icons">favorite</i> <i class="material-icons">android</i> <i class="material-icons">face</i> <i class="material-icons">done</i> <i class="material-icons">description</i> <i class="material-icons">grade</i> <p><b> Note! </b> This demo requires internet connection. </p> </body> </html>
Output Of Material icon
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
