DEV Community

loading...
Cover image for How to add an icon inside the button using CSS

How to add an icon inside the button using CSS

stackfindover profile image Stackfindover Updated on ・2 min read

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

Common Query

  1. How to add icon inside button
  2. Button with icon CSS
  3. 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 http-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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Add an icon inside the button Video Output:

Add an icon inside the button codepen Output:

Some JavaScript Tutorial

How to Integrate Webcam using JavaScript

Best way to use iframe on any website

What is JavaScript

Discussion (0)

pic
Editor guide