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

Top Courses for Class 6

10 videos|41 docs|23 tests
Download as PDF
Explore Courses for Class 6 exam

Top Courses for Class 6

Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
10M+ students study on EduRev
Related Searches

Important questions

,

CSS Icons | CSS for Beginners - Class 6

,

mock tests for examination

,

Summary

,

CSS Icons | CSS for Beginners - Class 6

,

past year papers

,

Previous Year Questions with Solutions

,

Exam

,

Viva Questions

,

Sample Paper

,

MCQs

,

study material

,

Free

,

ppt

,

video lectures

,

practice quizzes

,

CSS Icons | CSS for Beginners - Class 6

,

Objective type Questions

,

pdf

,

Semester Notes

,

shortcuts and tricks

,

Extra Questions

;