Add Icons In CSS

Add Icons In CSS Using Font Awesome,Bootstrap & Material Icons

Add Icons In CSS Using Font Awesome,Bootstrap & Material Icons

Add Icons In CSS
Add Icons In CSS

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)

Add Icons In CSS
Add Icons In CSS

 

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

Add Icons In CSS
Add Icons In CSS

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)

Add Icons In CSS
Add Icons In CSS
Find all Material icons here: Material icons
Thanks for Reading!


Leave a Reply