Font awesome - change the inner "i" color in class="fa-info-circle"

you should implement this like this:

html

<span class="fa-stack fa-2x">
  <i class="fa fa-circle fa-stack-2x icon-background2"></i>
  <i class="fa fa-info fa-stack-1x"></i> 
 </span>

css

.icon-background2 {
    color: #564363;
}

.fa-info {
  color:pink;
}

JSFiddle Example: https://jsfiddle.net/codejhonny/8feo4k4x/

this icon is transparent so you could reach this but give it background color

.icon-background1 {
color: blue;
}
.fa-info-circle:before {
  content: "\f05a";
  background-color: red;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-block;
  line-height: 50px;
}

check the fiddle

http://jsfiddle.net/Lgq1k4uc/7/