Curriculum
Course: CSS
Login

Curriculum

CSS

CSS INTRODUCTION

0/1

CSS Selectors

0/1

CSS Comments

0/1

CSS Padding

0/1

CSS Box Model

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Specificity

0/1

CSS Math Functions

0/1
Text lesson

CSS Icons

Icons can easily be added to your HTML page, by using an icon library.

IMG_3496

How To Add Icons

A straightforward method to incorporate an icon into your HTML page is by utilizing an icon library like Font Awesome.

Simply insert the designated icon class name within any inline HTML element (such as <i> or <span>).

Icons in these libraries are scalable vectors, allowing for customization with CSS attributes like size, color, shadow, and more.

Font Awesome Icons

To employ Font Awesome icons, navigate to fontawesome.com, log in, and obtain a code snippet to insert into 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:

IMG_3497

Bootstrap Icons

To utilize Bootstrap glyphicons, simply insert the following line within the <head> section of your HTML page:

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

No need for downloading or installation!

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:

Image

Google Icons

To incorporate Google icons, insert the following line within the <head> section of your HTML page:

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

No need for downloading or installation!

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:

Image