W3.CSS Icons
Icon Libraries
With W3.CSS you can use any icon library like:
- Font Awesome Icons
- Google Material Icons
- Bootstrap Icons
Using Icons
To use an icon, just add the name of the icon to the class of an HTML element.
To control the size of the icon, change the font-size property of the icon, or use the w3-size classes:
- w3-tiny
- w3-small
- w3-large
- w3-xxlarge
- w3-xxxlarge
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="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-cloud
w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud
w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud
w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
Try It Yourself »
For a complete list of icons: Visit our icon reference
Google Material Design Icons
home
home
home
menu
menu
menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
search
search
search
close
close
close
refresh
refresh
refresh
delete
delete
delete
person
person
person
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
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="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i
class="material-icons w3-xlarge">cloud</i>
<i class="material-icons
w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i
class="material-icons w3-text-teal" style="font-size:64px">cloud</i>
</body>
</html>
Try It Yourself »
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="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon
glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon
glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud
w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal"
style="font-size:64px"></i>
</body>
</html>
Try It Yourself »
