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 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>
  <link  href="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>

  <div class="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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="thish">
</div>

Post a Comment for "How To Add The Font Awesome Icon In After Before Elements"