Custom Font Awesome CSS

Question

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?

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

-Thank you very much!!

What I have:

The first image is what I have. THe second image is how is it supposed to be like

.exclamation-red .validation-tooltip-text:before { border: none; content: "\f06a"; font-family: fontAwesome; left: 10px; position: absolute; font-size: 20px; top: 12px; color: white; }

Please help me out. Thank you

Answer 1

Use fa-exclamation instead and you can style it within a round shape that you will add a white border to.

.validation-tooltip-text:before {
  content: "\f12a"; // http://fortawesome.github.io/Font-Awesome/icon/exclamation/
  font-family: fontAwesome;
  left: 10px;
  position: absolute;
  font-size: 20px;
  line-height:22px;
  height: 22px;
  width: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  text-align: center;
  vertical-align:middle;
  top: 12px;
  color: white;
}

http://codepen.io/partypete25/pen/dMwwvz?editors=1100