title: Custom Font Awesome CSS
body: <p>I'm trying to use Font Awesome to create my form. But the FA icon comes with a filled color already. When I try to add the color, it is given to the entire icon. Is there a possible way to do this? Or should I be using any other unicode? </p>
  
  <p>Note: I have to achieve this only by CSS. The parent component is not supposed to be configured. So I have to pass only a CSS class to achieve this. Please suggest me if there is any other unicode that I can use since the one that Im using dont really look like the one in the style guide</p>
  
  <p>-Thank you very much!!</p>
  
  <p>What I have:
  <a href="https://i.stack.imgur.com/tKPLV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tKPLV.png" alt="What I Have"></a></p>
  
  <p><a href="https://i.stack.imgur.com/TEFeV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TEFeV.png" alt="What is supposed to be"></a></p>
  
  <p>The first image is what I have. THe second image is how is it supposed to be like</p>
  
  <p><code>.exclamation-red .validation-tooltip-text:before {
      border: none;
      content: "\f06a";
      font-family: fontAwesome;
      left: 10px;
      position: absolute;
      font-size: 20px;
      top: 12px;
      color: white;
  }</code></p>
  
  <p>Please help me out. Thank you</p>