FontAwesome Icon不显示不确定原因

Question

下面有一个简单的代码片段，尝试使用CSS content显示一个图标，但不确定为什么它不显示，但是如果我直接放置类（现有类的fontawesome然后显示）但不是我的CSS。

不确定我在这里缺少什么，有人可以看看这里有什么不对吗？

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

参见示例

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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"><i class="fa fa-microphone"></i></span> 
  <span class="search-icon"><i class="fa fa-search"></i></span> 
</div>

＆＃13;

＆＃13;

＆＃13;