W3.CSS — Icons

Adding Icons

To use icons, add Font Awesome to your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Basic Icons

<i class="fa fa-home"></i> Home
<i class="fa fa-user"></i> User
<i class="fa fa-envelope"></i> Email
<i class="fa fa-camera"></i> Camera

Icon Sizes

<i class="fa fa-home w3-small"></i> Small
<i class="fa fa-home w3-medium"></i> Medium
<i class="fa fa-home w3-large"></i> Large
<i class="fa fa-home w3-xlarge"></i> X-Large
<i class="fa fa-home w3-jumbo"></i> Jumbo

Icon Colors

<i class="fa fa-home w3-text-red"></i> Red
<i class="fa fa-home w3-text-blue"></i> Blue
<i class="fa fa-home w3-text-green"></i> Green
<i class="fa fa-home w3-text-orange"></i> Orange

Icon Examples

<!-- Icon buttons -->
<button class="w3-button w3-blue">
    <i class="fa fa-home"></i> Home
</button>
<button class="w3-button w3-green">
    <i class="fa fa-plus"></i> Add
</button>

<!-- Icon in navigation -->
<div class="w3-bar w3-black">
    <a href="#" class="w3-bar-item w3-button">
        <i class="fa fa-home"></i> Home
    </a>
    <a href="#" class="w3-bar-item w3-button">
        <i class="fa fa-user"></i> Profile
    </a>
    <a href="#" class="w3-bar-item w3-button">
        <i class="fa fa-cog"></i> Settings
    </a>
</div>

<!-- Icon with badge -->
<button class="w3-button w3-blue">
    <i class="fa fa-bell"></i> Alerts
    <span class="w3-badge w3-red">3</span>
</button>

Popular Icons

Icon	Class
Home	fa-home
User	fa-user
Envelope	fa-envelope
Camera	fa-camera
Heart	fa-heart
Star	fa-star
Bell	fa-bell
Cog	fa-cog
Search	fa-search
Plus	fa-plus

Mini Practice

Create HTML code that:

1. Uses basic icons
2. Creates icon buttons
3. Adds icons to navigation
4. Uses icons with badges

Up Next

Next: Learn about W3.CSS Progress Bars.