Put Font Awesome icon in top right corner

Question

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).

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

.fa.fa-circle {
  color: darkorange;
  font-size: 0.25em;
}

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

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

Please add float:right inline css or add into .fa.fa-circle and you can add margin according to that also — Thakkar Darshan, Apr 16 '20 at 02:15

score 1 · Accepted Answer · answered Apr 16 '20 at 04:00

I have made some changes to Penny Liu's Answer fom above. but still I am unsure whether it will work in tab.

.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: .35em;
  top: 0.35em;
  right: 0.25em;
  /*z-index: 1;*/
}

<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>

royranger · Answer 2 · 2020-04-16T02:06:59.763

You could set btn1 to position: relative

And then for the icon, do

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

ie -->

.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>

It is in the button, you can play around with the margin if you want to give it a little space and adjust the position. Have added the `margin` property to my snippet above. — royranger, Apr 16 '20 at 02:08

score 0 · Answer 3 · answered Apr 16 '20 at 01:04

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>

I updated the style and also if you remove the `active ` class the icon would not show. — Azeez Gafar, Apr 16 '20 at 01:32

Penny Liu · Answer 4 · 2020-04-17T05:41:50.203

0

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>

edited Apr 17 '20 at 05:41

answered Apr 16 '20 at 02:41

Penny Liu

15,447
5
79
98

Not in corner, but inside button, and in between the border, little bit positioning I wanted – Apr 16 '20 at 02:50
As per now, it's working after some change(re-sizing the circle), I want to use this styling inside on.active() js call tab - - In sidebar, active tab.Let me see that – Apr 16 '20 at 04:04

Put Font Awesome icon in top right corner

4 Answers4

Linked