FontAwesome Icon不显示不确定原因

Question

我在下面有一个简单的片段,尝试使用CSS显示一个图标,content但不知道为什么它不显示,但是如果我直接放置类(现有的类fontawesome然后显示)而不是我的CSS.

不知道我在这里缺少什么,有人可以看看这里有什么不对吗？

.search-block {
  max-width: 850px;
  width: 100%;
  margin: 0;
  position: relative;
  width: 100%;
  background: #e5e5e5;
  border-radius: 4px;
  padding: 5px 10px;
  box-sizing: border-box;
}
.search-block > .microphone-icon {
  position: absolute;
  right: 0;
  font-family: FontAwesome;
  content: "\f130";
  font-size: 18px;
  color: #fff;
  width: 50px;
  height: 50px;
  background: #f00;
  top:0;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search-block">
  <h2 class="search-result"></h2>
  <span class="microphone-icon"></span> 
  <span class="search-icon"></span> 
</div>

Answer 1

该content属性仅适用于伪元素::before和::after.您需要单独添加这些:

.search-block > .microphone-icon::before {
  font-family: FontAwesome;
  content: "\f130";
}

.search-block {
  max-width: 850px;
  width: 100%;
  margin: 0;
  position: relative;
  width: 100%;
  background: #e5e5e5;
  border-radius: 4px;
  padding: 5px 10px;
  box-sizing: border-box;
}
.search-block > .microphone-icon {
  position: absolute;
  right: 0;
  font-size: 18px;
  color: #fff;
  width: 50px;
  height: 50px;
  background: #f00;
  top:0;
}

.search-block > .microphone-icon::before {
  font-family: FontAwesome;
  content: "\f130";
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="search-block">
  <h2 class="search-result"></h2>
  <span class="microphone-icon"></span> 
  <span class="search-icon"></span> 
</div>