ADVERTISEMENT

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

Telegram Group Join Now

ADVERTISEMENT

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

Add Icons In CSS
Add Icons In CSS

Add Icons In CSS

ADVERTISEMENT

ADVERTISEMENT

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>.

ADVERTISEMENT

Add Font Awesome Icons

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

Add Bootstrap Icons

ADVERTISEMENT

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

ADVERTISEMENT

Add Material Icons

ADVERTISEMENT

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.

ADVERTISEMENT

The <link> tag should be inside the <head> element.

ADVERTISEMENT

<!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

ADVERTISEMENT

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!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT