Scribd
Upload
106 views

CSS Icons 10

This document discusses CSS icons and how to add them to HTML pages. It provides examples of popular icon libraries like Font Awesome, Google Icons, and Bootstrap Icons that can be used by adding short code snippets to the HTML head. The document also lists some common icons and their codes. An exercises section asks students to identify icon codes and customize icon properties like size and color.

Uploaded by

Ryan Aint simp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
106 views

CSS Icons 10

This document discusses CSS icons and how to add them to HTML pages. It provides examples of popular icon libraries like Font Awesome, Google Icons, and Bootstrap Icons that can be used by adding short code snippets to the HTML head. The document also lists some common icons and their codes. An exercises section asks students to identify icon codes and customize icon properties like size and color.

Uploaded by

Ryan Aint simp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Basic Education Department

School Year 2021 – 2022

LEARNING ACTIVITY NO. 9

Name: __________________________________________________ Score: ___________________________


Grade and Section: ____________________________________ Date: ____________________________
Teacher: _________Omer Anthony R. Moncada_________ Subject: COMED-10

Activity Title: CSS Icon

Learning Target:
1. I can identify the different icons in CSS.
References:
1. W3Schools.com. CSS icons. Retrieve on November 09, 2020.
https://www.w3schools.com/css/css_icons.asp
2. W3Schools.com. icons reference. Retrieve on November 09, 2020.
https://www.w3schools.com/icons/icons_reference.asp

I. Preliminary Task:

When you read or hear the word “icon”, what comes first in your mind?
_________________________________________________________________________________________________
_________________________________________________________________________________________________
_______________________________________________________________________ .

II. Concepts/Examples:

CSS Icons

How to Add Icons


1. The simplest way to add an icon to your HTML page, is with an icon library, such
as Font Awesome.
2. Add the name of the specified icon class to any inline HTML element (like <i> or
<span>).

45 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
3. 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"></script>
Note: No downloading or installation is required!

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!

Bootstrap Icons
➢ To use the Bootstrap glyphicons, add the following line inside the <head> section of
your HTML page:
Note: No downloading or installation is required!

46 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
Other Icons
Below are some of familiar and common icon found on the internet:

Icon for WIFI Icons for User

Icons for Envelop Icons for Facebook

For a complete list of all icons, visit Icon Tutorial: Just search: w3school icons reference
Or type: https://www.w3schools.com/icons/icons_reference.asp

47 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
III. Exercises/Activities:

Activity 1: Identification
Directions: Observe the following icons carefully and identify the corresponding code from
the discussion above. Write your answer on the given space.

1. Cloud Font Awesome _________________________________________________


Bootstrap _________________________________________________
Google _________________________________________________

2. Wi-Fi Font Awesome 4 _________________________________________________


Font Awesome 5 _________________________________________________
Google _________________________________________________

3. Envelope Font Awesome 4 _________________________________________________


Font Awesome 5 _________________________________________________
Bootstrap _________________________________________________

4.
_________________________________________________

5. _________________________________________________

6. Size:48px
Color: blue _______________________________________________________________________

7. Size:60px
Color: Red _______________________________________________________________________

8. Size:80
Color: yellow _______________________________________________________________________

9.
Size:35px
Color: green _______________________________________________________________________

10.
Size:100px
Color: pink _______________________________________________________________________

48 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022

You might also like