How To Add The Font Awesome Icon In After Before Elements
Hi i am trying to add the font awesome icon in before and after elements.But i do not know how to write its css and how to get font awesome icons links to put it in the after befor
Solution 1:
Add to to your before
pseudo selector
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
To get the value of content
, go to their website,
Right-click -> Inspect any icon (<i> ::before </i>
tag) and then check the value of the content in the before
pseudo selector.
Dont forget to put the value of font
normal normal normal 14px/1 FontAwesome;
This is very important.
<html><head><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /></head><style>.thish {
position: relative;
height: 150px;
width: 150px;
background: red;
}
.thish::before {
position: absolute;
content: "\f2ba";
font: normal normal normal 14px/1 FontAwesome;
right: 40%;
color: #000;
bottom: 0;
height: 30px;
width: 60px;
background: green;
z-index: 1;
}
</style><body><divclass="thish"></div></body></html>
Solution 2:
For Fontawesome 4
You just have to add the following CSS to your after or before element:
font: normal normal normal 14px/1 FontAwesome;
content: '\f042';
Here the content
is the icon you want to add. Just copy the Unicode of the icon from the FA website and paste it in the content with a \
prefix.
.thish {
position: relative;
height: 150px;
width: 150px;
background: red;
}
.thish::before {
position: absolute;
font:normal normal normal 14px/1 FontAwesome;
content: '\f042';
right: 40%;
color: #000;
bottom: 0;
height: 30px;
width: 60px;
background: green;
z-index: 1;
}
<linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"rel="stylesheet"/><divclass="thish"></div>
Post a Comment for "How To Add The Font Awesome Icon In After Before Elements"