Put Font Awesome Icon In Top Right Corner

April 16, 2024 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><metaname="viewport"content="width=device-width, initial-scale=1" /><!-- Add icon library --><linkrel="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: 10px12px;
        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><buttonclass="btn1 active"><iclass="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

Baca Juga

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

ie -->

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

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

<head><metaname="viewport"content="width=device-width, initial-scale=1"><!-- Add icon library --><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><buttonclass="btn1"><iclass="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: 10px12px;
  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;
}

<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><buttonclass="btn active">Active</button><buttonclass="btn">Button</button>

JavaScript Sample

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"