Skip to content Skip to sidebar Skip to footer

Put Font Awesome Icon In Top Right Corner

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

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>

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