如何在:before和:after伪元素中添加Font Awesome图标

没问题！我来帮你搞定在伪元素里用Font Awesome图标的事儿，结合你已经写的代码，咱们一步步来：

第一步：获取图标的Unicode值 #

Font Awesome 4.7.0的图标都是基于字体实现的，每个图标对应一个Unicode编码。你可以在Font Awesome的图标列表里找到想要的图标，比如fa-heart（心形图标）的Unicode是\f004，fa-star（星星图标）是\f005——每个图标详情页都会显示这个编码。

第二步：修改伪元素的CSS样式 #

要让伪元素显示图标，需要给它设置三个核心属性，再结合你需要的定位、样式调整：

• content：设置为图标的Unicode（记得前面加反斜杠）
• font-family: FontAwesome;：必须指定这个字体族，Font Awesome的CSS已经帮我们定义好了这个字体
• 其他样式：比如字体大小、颜色、对齐方式等，和普通文字样式一样调整

修改后的完整代码 #

<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:'\f004'; /* 这里是fa-heart图标的Unicode */
  font-family: FontAwesome; /* 关键：指定Font Awesome字体族 */
  font-size: 24px; /* 调整图标大小 */
  right:40%; 
  color:#fff; 
  bottom:0; 
  height:30px; 
  width:60px; 
  background:green; 
  z-index:1;
  display: flex; /* 可选：让图标在绿色背景里居中 */
  align-items: center;
  justify-content: center;
}
/* 给:after也加个示例，用fa-star图标 */
.thish::after{
  position:absolute;
  content:'\f005'; /* fa-star的Unicode */
  font-family: FontAwesome;
  font-size: 20px;
  left:20%;
  top:20%;
  color:yellow;
}
</style>
<body>
<div class="thish">
</div>
</body>
</html>

关键点说明 #

• 不要忘了font-family: FontAwesome;：如果不设置，伪元素只会显示Unicode的字符，而不是图标
• 图标大小通过font-size控制，颜色通过color控制，完全和文字样式一致
• 你可以根据需求替换content里的Unicode，换成任何Font Awesome 4.7.0里的图标

内容的提问来源于stack exchange，提问作者Sumit Kumar