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

CSS Icons | CSS for Beginners - Class 6

,

practice quizzes

,

study material

,

Semester Notes

,

Important questions

,

Previous Year Questions with Solutions

,

Free

,

Viva Questions

,

Sample Paper

,

Objective type Questions

,

CSS Icons | CSS for Beginners - Class 6

,

mock tests for examination

,

video lectures

,

Exam

,

Extra Questions

,

ppt

,

past year papers

,

CSS Icons | CSS for Beginners - Class 6

,

shortcuts and tricks

,

pdf

,

Summary

,

MCQs

;