10

How to add an icon inside the button using CSS

 3 years ago
source link: https://dev.to/stackfindover/how-to-add-an-icon-inside-the-button-using-css-42de
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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 modeExit 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 modeExit fullscreen mode

Add an icon inside the button Video Output:

Add an icon inside the button Output:

We will update soon:)

Some JavaScript Tutorial

How to Integrate Webcam using JavaScript

Best way to use iframe on any website

What is JavaScript


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK