How to add an icon inside the button using CSS

April 10, 2021

Rahul

Hello, guys In this tutorial we will learn how to add an icon inside the button using CSS.

Common Query

How to add icon inside button
Button with icon CSS
add icon using CSS

Hello, guys In this tutorial we will try to solve the mentioned query. and also we will learn how to add an icon inside the button using CSS.

First, we need to create two files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to add icon inside button using CSS Only</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta https-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="button-outer">
      <button class="button">
        Book Now
      </button>
    </div>
  </body>
</html>

Step:2

Then we need to add code for style.css which code I provide in the below screen.

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.button {
  font-size: 25px;
  padding: 10px 20px;
  background: #3f0069;
  border: unset;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 2px #000;
  outline: 0;
  position: relative;
}
.button:before {
  content: "\f017";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Add an icon inside the button: Watch Now

We hope you liked this article (How to add an icon inside the button using CSS). You should definitely keep your thoughts about it in the comment below and share this article with your friends.

Leave a Comment Cancel reply