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:

  1. Include the icon library from a CDN (Content Delivery Network) in the <head> section.
  2. 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.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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>
Try It Yourself »

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.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>

<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>

</body>
</html>
Try It Yourself »

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.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<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>
Try It Yourself »

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.