Skip to content Skip to sidebar Skip to footer
Home / Css / Font Awesome / Html

How To Add The Font Awesome Icon In After Before Elements

Post a Comment
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 beforepseudo 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 beforepseudo 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"