CODEWITHSUNDEEP
htmlcssfont-awesome
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

FontAwesome Icon not displaying not sure why

I have a simple snippet below, trying to display an icon using CSS content but not sure why its not displaying, however if I put the class directly (existing class of fontawesome then its displaying) but not with my CSS.

Not sure what I am missing here, can anybody please look whats wrong here?

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

Upvotes: 1

Views: 1019

Answers (2)

Jagdish Parmar
Jagdish Parmar

Reputation: 599

See example

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

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128771

The content property only works on pseudo-elements ::before and ::after. You'll need to add these in separately:

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

Upvotes: 5

Related Questions