Table of Contents
CSS Icons | CSS Icons with code – codewithrandom
CSS Icons
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>.
Font Awesome Icons
To use Font Awesome icons we need to include the 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://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>
Find all free Font Awesome icons here: Font Awesome Icons
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>
Find all Bootstrap’s icons here: Bootstrap’s Icons
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>