Put Font Awesome Icon In Top Right Corner

September 12, 2022 Post a Comment

I want to put the fa-circle to the top corner. Basically, what I am looking for, is positioning the fa-circle to the top right (only for active buttons).

Solution 1:

To make the icon show only for the active button, you would have to hide the icon as default, then pass a class to the button to make the icon display when needed to be active with some javascript or jquery.

Code below shows and active class added the button, the CSS has been updated to hide the icon till the active class has been appended to the button.

Hope this helps.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- Add icon library -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      .btn1 {
        /*  background-color:#f5e0f9;*/
        background-color: grey;
        border: none;
        color: white;
        padding: 10px 12px;
        font-size: 14px;
        cursor: pointer;
      }
      .btn1 .fa {
        display: none;
      }
      .btn1.active .fa.fa.fa-circle {
        display: block;
      }
      .fa.fa-circle {
        color: darkorange;
        font-size: 0.25em;
      }
    </style>
  </head>
  <body>
    <button class="btn1 active">
      <i class="fa fa-circle pull-right"></i>Active
    </button>
  </body>
</html>

Solution 2:

You could set btn1 to position: relative

And then for the icon, do

position: absolute;
right: 0;
top: 0;

ie -->

Baca Juga

.btn1 {
  background-color: grey;
  border: none;
  color: white;
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  position: relative;
}

.fa.fa-circle{
  color:darkorange;
  font-size: 0.25em;
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px 5px 0 0;
}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>


<button class="btn1"><i class="fa fa-circle pull-right"></i>Active</button>

</body>

Solution 3:

I guess this is what you looking for:

.btn {
  position: relative;
  display: inline-block;
  padding: 10px 12px;
  background-color: grey;
  color: white;
  border: none;
  font-size: 1.4em;
  cursor: pointer;
}

.active::before {
  position: absolute;
  font-family: FontAwesome;
  content: "\f111";
  color: darkorange;
  font-size: .7em;
  top: 0em;
  right: 0em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="btn active">Active</button>
<button class="btn">Button</button>

JavaScript Exercises

Put Font Awesome Icon In Top Right Corner

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Put Font Awesome Icon In Top Right Corner"