Class 6 Exam  >  Class 6 Notes  >  CSS for Beginners  >  CSS Icons

CSS Icons | CSS for Beginners - Class 6 PDF Download

Icons can easily be added to your HTML page, by using an icon library.
CSS Icons | CSS for Beginners - Class 6

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 <i> or <span>).
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, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Note: No downloading or installation is required!
Example

<!DOCTYPE html>

<html>

<head>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

</head>

<body>


<i class="fas fa-cloud"></i>

<i class="fas fa-heart"></i>

<i class="fas fa-car"></i>

<i class="fas fa-file"></i>

<i class="fas fa-bars"></i>


</body>

</html>

Result:

CSS Icons | CSS for Beginners - Class 6
For a complete reference of all Font Awesome icons, visit our Icon Reference.

Bootstrap Icons


To use the Bootstrap glyphicons, add the following line inside the <head> 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

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>


<i class="glyphicon glyphicon-cloud"></i>

<i class="glyphicon glyphicon-remove"></i>

<i class="glyphicon glyphicon-user"></i>

<i class="glyphicon glyphicon-envelope"></i>

<i class="glyphicon glyphicon-thumbs-up"></i>


</body>

</html>

Result:

CSS Icons | CSS for Beginners - Class 6

Google Icons


To use the Google icons, add the following line inside the <head> 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

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>


<i class="material-icons">cloud</i>

<i class="material-icons">favorite</i>

<i class="material-icons">attachment</i>

<i class="material-icons">computer</i>

<i class="material-icons">traffic</i>


</body>

</html>

Result:

CSS Icons | CSS for Beginners - Class 6

For a complete list of all icons, visit our Icon Tutorial.

The document CSS Icons | CSS for Beginners - Class 6 is a part of the Class 6 Course CSS for Beginners.
All you need of Class 6 at this link: Class 6
10 videos|41 docs|23 tests
Related Searches

Sample Paper

,

past year papers

,

CSS Icons | CSS for Beginners - Class 6

,

Semester Notes

,

Previous Year Questions with Solutions

,

Summary

,

CSS Icons | CSS for Beginners - Class 6

,

Objective type Questions

,

Viva Questions

,

ppt

,

Free

,

practice quizzes

,

video lectures

,

Extra Questions

,

study material

,

pdf

,

Important questions

,

CSS Icons | CSS for Beginners - Class 6

,

shortcuts and tricks

,

Exam

,

MCQs

,

mock tests for examination

;