Scribd
Upload
20 views13 pages

CSS Icons

Uploaded by

Jehu Marco Delos Santos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views13 pages

CSS Icons

Uploaded by

Jehu Marco Delos Santos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

CSS ICONS

MAFEL D. SALAZAR
CSS ICONS
•Can be easily added to
HTML page, by using an
icon library.
HOW TO ADD
ICONS
• The simplest way to add an icon to HTML
page, is with an icon library, such as Font
Awesome
• Add the name of the specified icon class to
any inline HTML element (<i> or <span>)
• All the icons in the icon libraries, are scalable
vectors that can customized with CSS (size,
color, shadow, etc.)
FONT AWESOME ICONS
• To use, 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>
FONT
AWESOME
SAMPLE
CODE
FONT
AWESOME
SAMPLE
CODE
BOOTSTRAP ICONS

• To use bootstrap glyphicons, add the following inside


the <head> section of your HTML page:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3
.7/css/bootstrap.min.css">
BOOTSTR
AP ICONS
SAMPLE
CODE
BOOTSTRA
P ICONS
SAMPLE
CODE
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">
GOOGLE
ICONS
SAMPLE
CODE
GOOGLE
ICONS
SAMPLE
CODE
GOOGLE
ICONS
OUTPUT

You might also like