Toggle navigation
TUTORIAL HOME
W3.CSS Icons
❮ Previous Next ❯
Icon Libraries
With W3.CSS you can use the icon library you like, such as:
Font Awesome Icons
Google Material Design Icons
Bootstrap Icons
Using an Icon Library
To insert an icon:
Include the icon library from a CDN (Content Delivery Network) in the <head> section.
Add the name of the icon class to any inline HTML element.
Tip: The <i> and <span> elements are widely used to add icons.
To control the size of the icon, change the font-size property of the icon, or use one of the w3-size classes:
w3-tiny
w3-small
w3-large
w3-xxlarge
w3-xxxlarge
w3-jumbo
Some Font Awesome Icons
fa fa-home
fa fa-bars
fa fa-arrow-left
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-truck
fa fa-plane
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://cdnjs.
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
»
For a complete list of icons: Visit our icon reference
Some Google Material Design Icons
home
home
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
search
search
close
close
refresh
refresh
delete
delete
person
person
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://fonts.
<body>
<i class="material-icons">home</
<i class="material-icons">search<
<i class="material-icons">cloud</
<i class="material-icons">delete<
</body>
</html>
»
Some Bootstrap Icons
home
menu-hamburger
arrow_back
arrow_forward
search
remove
refresh
trash
user
file
print
plane
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://maxcdn.
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>
»
❮ Previous Next ❯
TUTORIAL HOME
W3.CSS Icons
❮ Previous Next ❯
Icon Libraries
With W3.CSS you can use the icon library you like, such as:
Font Awesome Icons
Google Material Design Icons
Bootstrap Icons
Using an Icon Library
To insert an icon:
Include the icon library from a CDN (Content Delivery Network) in the <head> section.
Add the name of the icon class to any inline HTML element.
Tip: The <i> and <span> elements are widely used to add icons.
To control the size of the icon, change the font-size property of the icon, or use one of the w3-size classes:
w3-tiny
w3-small
w3-large
w3-xxlarge
w3-xxxlarge
w3-jumbo
Some Font Awesome Icons
fa fa-home
fa fa-bars
fa fa-arrow-left
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-truck
fa fa-plane
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://cdnjs.
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
»
For a complete list of icons: Visit our icon reference
Some Google Material Design Icons
home
home
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
search
search
close
close
refresh
refresh
delete
delete
person
person
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://fonts.
<body>
<i class="material-icons">home</
<i class="material-icons">search<
<i class="material-icons">cloud</
<i class="material-icons">delete<
</body>
</html>
»
Some Bootstrap Icons
home
menu-hamburger
arrow_back
arrow_forward
search
remove
refresh
trash
user
file
plane
Example
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.Omegas.com/
<link rel="stylesheet" href="https://maxcdn.
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>
»
❮ Previous Next ❯
No comments:
Post a Comment