title: how to adjust two colors in Font Awesome?
body: <p>I would like to use Font Awesome´s Facebook icon, but I have difficulty in adjusting colors properly. My webpage background color is grey, and I would like to have an icon with mixture of white &amp; blue, but extent of colors doesn´t adjust properly. Following is my HTML code:</p>
  
  <pre><code>    &lt;a class="list-group-item"  href="https://www.facebook.com/pages/Scientific-Editing-and-Proofreading/726988900763622" target="_blank"&gt;&lt;i class="fa fa fa-facebook-square fa-5x fa-cog-fa"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>And following is my css:</p>
  
  <pre><code>.fa-cog-fa {
  color: white;
  background-color:blue;
  }
  </code></pre>
  
  <p>And you can see the final look under following link:
  <a href="http://i.stack.imgur.com/LHZQl.jpg" rel="nofollow">this is how my code at the end appear</a></p>
  
  <p>As you see, blue color is so extent such that crosses borders of white color. How can I fix this issue?</p>