how to add the font awesome icon in after before elements [duplicate]

问题

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>

回答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 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>

回答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>

来源：https://stackoverflow.com/questions/50559526/how-to-add-the-font-awesome-icon-in-after-before-elements

标签

html

css

font-awesome