Font Awesome Basic Usage

After successfully importing Font Awesome, we can start using it to add icons to web pages. This chapter will introduce the basic usage of Font Awesome.

Basic Syntax

Font Awesome icons are implemented through HTML elements and CSS classes. The basic syntax is as follows:

<i class="prefix icon-name"></i>

Where:

• <i> is the HTML element used to display icons (can also use other inline elements like <span>)
• prefix indicates the style type of the icon
• icon-name indicates the specific icon

Icon Prefixes

Font Awesome uses different prefixes to distinguish icon style types:

Font Awesome 6 Version Prefixes:

Prefix	Type	Description
fas	Solid	Solid icons (free)
far	Regular	Regular/outline icons (some free)
fab	Brands	Brand icons (free)
fal	Light	Light icons (Pro version)
fad	Duotone	Duotone icons (Pro version)
fak	Kits	Custom icon sets

For free users, the main prefixes are fas, far, and fab.

Basic Usage Examples

1. Using Solid Icons (fas)

<!-- Heart icon -->
<i class="fas fa-heart"></i>

<!-- User icon -->
<i class="fas fa-user"></i>

<!-- Search icon -->
<i class="fas fa-search"></i>

<!-- Home icon -->
<i class="fas fa-home"></i>

2. Using Regular Icons (far)

<!-- Outline heart icon -->
<i class="far fa-heart"></i>

<!-- Outline star icon -->
<i class="far fa-star"></i>

<!-- Outline clock icon -->
<i class="far fa-clock"></i>

3. Using Brand Icons (fab)

<!-- GitHub icon -->
<i class="fab fa-github"></i>

<!-- Facebook icon -->
<i class="fab fa-facebook"></i>

<!-- Twitter icon -->
<i class="fab fa-twitter"></i>

<!-- Google icon -->
<i class="fab fa-google"></i>

Finding and Using Icons

1. Find Icons on the Official Website

Visit the Font Awesome Icon Library to find icons in the following ways:

• Browse icons by category
• Use search to find specific icons
• View icon details including name, category, style, etc.

2. Icon Usage Example

After finding the needed icon on the official website, click the icon to view details and usage methods:

<!-- For example, find "coffee" icon -->
<i class="fas fa-mug-hot"></i>

Icon Size Adjustment

Font Awesome provides multiple ways to adjust icon size:

1. Using Predefined Classes

<i class="fas fa-heart fa-xs"></i> <!-- Extra small -->
<i class="fas fa-heart fa-sm"></i> <!-- Small -->
<i class="fas fa-heart fa-lg"></i> <!-- Large -->
<i class="fas fa-heart fa-xl"></i> <!-- Extra large -->
<i class="fas fa-heart fa-2xl"></i> <!-- 2x large -->

2. Using Relative Size Classes

<i class="fas fa-heart fa-1x"></i> <!-- Default size -->
<i class="fas fa-heart fa-2x"></i> <!-- 2x size -->
<i class="fas fa-heart fa-3x"></i> <!-- 3x size -->
<i class="fas fa-heart fa-5x"></i> <!-- 5x size -->
<i class="fas fa-heart fa-10x"></i> <!-- 10x size -->

3. Using CSS Styles

<i class="fas fa-heart" style="font-size: 24px;"></i>
<i class="fas fa-heart" style="font-size: 2em;"></i>

Icon Color Setting

You can set icon colors using CSS color property:

<!-- Using predefined colors -->
<i class="fas fa-heart" style="color: red;"></i>
<i class="fas fa-heart" style="color: #3498db;"></i>
<i class="fas fa-heart" style="color: rgb(255, 0, 0);"></i>

<!-- Using CSS classes -->
<style>
.icon-red {
    color: red;
}
</style>

<i class="fas fa-heart icon-red"></i>

Icon Animation Effects

Font Awesome provides some built-in animation effects:

1. Rotation Animation

<!-- Continuous rotation -->
<i class="fas fa-spinner fa-spin"></i>

<!-- Pulse rotation (8 steps) -->
<i class="fas fa-spinner fa-pulse"></i>

2. Pulse Animation

<!-- Heartbeat effect -->
<i class="fas fa-heart fa-beat"></i>

<!-- Bounce effect -->
<i class="fas fa-heart fa-bounce"></i>

3. Shake Animation

<!-- Shake effect -->
<i class="fas fa-heart fa-shake"></i>

<!-- Tada effect -->
<i class="fas fa-heart fa-tada"></i>

4. Fade Animation

<!-- Fade in/out -->
<i class="fas fa-heart fa-fade"></i>

<!-- Beat fade -->
<i class="fas fa-heart fa-beat-fade"></i>

Icon Combination Usage

1. Icons with Text

<!-- Icon before text -->
<i class="fas fa-user"></i> User info

<!-- Icon after text -->
View more <i class="fas fa-arrow-right"></i>

2. Icon Buttons

<button class="btn">
    <i class="fas fa-download"></i> Download
</button>

<button class="btn">
    <i class="fas fa-trash"></i> Delete
</button>

3. Navigation Menu Icons

<ul>
    <li><i class="fas fa-home"></i> Home</li>
    <li><i class="fas fa-user"></i> User</li>
    <li><i class="fas fa-cog"></i> Settings</li>
</ul>

Complete Example

The following is a complete example showing basic Font Awesome usage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Awesome Basic Usage Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .icon-example {
            margin: 10px;
            display: inline-block;
        }
        .btn {
            padding: 10px 15px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            background-color: #3498db;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Font Awesome Basic Usage Example</h1>

    <h2>Basic Icons</h2>
    <div class="icon-example">
        <i class="fas fa-heart"></i> Heart icon
    </div>
    <div class="icon-example">
        <i class="fab fa-github"></i> GitHub icon
    </div>

    <h2>Different Sizes</h2>
    <div class="icon-example">
        <i class="fas fa-star fa-xs"></i> Extra small
    </div>
    <div class="icon-example">
        <i class="fas fa-star fa-lg"></i> Large
    </div>
    <div class="icon-example">
        <i class="fas fa-star fa-2x"></i> 2x size
    </div>

    <h2>Colored Icons</h2>
    <div class="icon-example">
        <i class="fas fa-circle" style="color: red;"></i> Red
    </div>
    <div class="icon-example">
        <i class="fas fa-circle" style="color: green;"></i> Green
    </div>
    <div class="icon-example">
        <i class="fas fa-circle" style="color: blue;"></i> Blue
    </div>

    <h2>Animated Icons</h2>
    <div class="icon-example">
        <i class="fas fa-spinner fa-spin"></i> Rotation
    </div>
    <div class="icon-example">
        <i class="fas fa-heart fa-beat"></i> Heartbeat
    </div>

    <h2>Icon Buttons</h2>
    <button class="btn">
        <i class="fas fa-download"></i> Download
    </button>
    <button class="btn">
        <i class="fas fa-trash"></i> Delete
    </button>
</body>
</html>

Through this chapter, you should have mastered the basic usage of Font Awesome. In the next chapter, we'll dive into the different types of icons and their classifications provided by Font Awesome.