How to Add Icon Inside Button in HTML and CSS

Author:

Introduction

Adding an icon inside a button can improve the user interface and make the button more visually appealing. Icons can help clarify the button's purpose, whether it's for submitting a form, sharing content, or navigating. You can easily add an icon inside a button using HTML and CSS, often with icon libraries like Font Awesome. 

In this guide, we’ll create multiple buttons with icons using both Font Awesome and image icons.

Development Steps

  1. Create Basic HTML: Write HTML for multiple buttons with icons.
  2. Add CSS to Style the Buttons and Icons: Use CSS to style the buttons and position the icons.
  3. Add Icons Using Font Awesome: Use Font Awesome to integrate icons.
  4. Add Image Icons: Use an image inside the button as an icon.

Step 1: Create Basic HTML

We will create multiple buttons containing both text and an icon.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button with Icon Example</title>
    <!-- Font Awesome CDN for icon fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>

    <!-- Step 1: Multiple buttons with icons -->
    <div class="container">
        <!-- Button with Font Awesome icon -->
        <button class="custom-button primary">
            <i class="fas fa-download"></i> Download
        </button>
        
        <!-- Button with Font Awesome icon (Right-aligned icon) -->
        <button class="custom-button success">
            Submit <i class="fas fa-check"></i>
        </button>
        
        <!-- Button with Image icon -->
        <button class="custom-button danger">
            <img src="https://via.placeholder.com/16" alt="Trash icon"> Delete
        </button>
    </div>

</body>
</html>

Explanation:

  • The <i> tag is used for Font Awesome icons.
  • The <img> tag is used for custom image icons.
  • Each button has a class custom-button for styling and additional classes like primary, success, and danger for color variations.

Step 2: Add CSS to Style the Buttons and Icons

Now, let’s style the buttons and icons, ensuring proper alignment and spacing.

/* Base button styles */
.custom-button {
    font-size: 16px;
    padding: 10px 20px;
    background-color: #3498db; /* Default background color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex; /* Align icon and text */
    align-items: center; /* Vertically center text and icon */
    gap: 10px; /* Space between icon and text */
    transition: background-color 0.3s ease;
}

/* Color variations */
.primary {
    background-color: #3498db; /* Blue */
}

.success {
    background-color: #2ecc71; /* Green */
}

.danger {
    background-color: #e74c3c; /* Red */
}

/* Hover effect */
.custom-button:hover {
    opacity: 0.9;
}

/* Icon styles */
.custom-button i, .custom-button img {
    width: 16px;
    height: 16px;
}

Explanation:

  • display: inline-flex: Ensures the icon and text are aligned horizontally and centered.
  • gap: 10px: Adds space between the icon and the text.
  • border-radius: 5px: Makes the buttons slightly rounded.
  • transition: background-color 0.3s ease;: Adds a smooth hover effect to the button.

Step 3: Add Icons Using Font Awesome

To use Font Awesome icons, we added a link to the Font Awesome CDN in the <head> section. Here are two examples:

  1. Download Button with Left-Aligned Icon: The icon appears on the left of the text.

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

  2. Submit Button with Right-Aligned Icon: The icon appears on the right of the text.

    <button class="custom-button success">
    Submit <i class="fas fa-check"></i>
</button>

Step 4: Add Image Icons

We can also add a custom image as an icon inside the button. Here’s an example of a button with an image icon:

<button class="custom-button danger">
    <img src="https://via.placeholder.com/16" alt="Trash icon"> Delete
</button>

Explanation:

  • <img>: The image is used as an icon, and the CSS ensures it is sized appropriately (16x16 pixels).

Complete Code Example

Here’s the complete HTML and CSS code for buttons with icons, both using Font Awesome and custom images:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button with Icon Example</title>
    <!-- Font Awesome CDN for icon fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* Base button styles */
        .custom-button {
            font-size: 16px;
            padding: 10px 20px;
            background-color: #3498db; /* Default background color */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: inline-flex; /* Align icon and text */
            align-items: center; /* Vertically center text and icon */
            gap: 10px; /* Space between icon and text */
            transition: background-color 0.3s ease;
        }

        /* Color variations */
        .primary {
            background-color: #3498db; /* Blue */
        }

        .success {
            background-color: #2ecc71; /* Green */
        }

        .danger {
            background-color: #e74c3c; /* Red */
        }

        /* Hover effect */
        .custom-button:hover {
            opacity: 0.9;
        }

        /* Icon styles */
        .custom-button i, .custom-button img {
            width: 16px;
            height: 16px;
        }

        /* Center the buttons */
        .container {
            text-align: center;
            margin-top: 50px;
            display: flex;
            gap: 20px;
            justify-content: center;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- Button with Font Awesome icon (Left-aligned icon) -->
        <button class="custom-button primary">
            <i class="fas fa-download"></i> Download
        </button>
        
        <!-- Button with Font Awesome icon (Right-aligned icon) -->
        <button class="custom-button success">
            Submit <i class="fas fa-check"></i>
        </button>
        
        <!-- Button with Image icon -->
        <button class="custom-button danger">
            <img src="https://via.placeholder.com/16" alt="Trash icon"> Delete
        </button>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to add icons inside buttons using both Font Awesome and image icons. We styled the buttons with CSS, ensuring proper alignment and spacing between the icon and text, and added hover effects for interactivity. You can easily customize the button sizes, colors, and icons to fit your design needs.

Comments

Post a Comment

Leave Comment