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"