how to add the font awesome icon in after before elements

Question

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 before css.

I have created a structure like this.

 <html>
 <head>
  <link rel="stylesheet" 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:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
 </style>
 
 <body>
  <div class="thish"> 
  </div>
 </body>
 </html>

Font Awesome 5 has [examples about this](https://fontawesome.com/how-to-use/svg-with-js#pseudo-elements) (though you're using v4.7.0). — Joonas, May 28 '18 at 06:59

Gautam Naik · Accepted Answer · 2018-05-28T05:27:45.467

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 rel="stylesheet" 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>

Is there a way to include the icon and also have text with it? Something like `content: "\f2ba - message that appears next to icon"` — Frank, Nov 23 '20 at 21:21

score 3 · Answer 2 · answered May 28 '18 at 05:28

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>

Thanks a lot for the response. – Sumit Kumar May 28 '18 at 05:31 — Sumit Kumar, May 28 '18 at 05:31

how to add the font awesome icon in after before elements

2 Answers2

Linked