vamshi krishna vamshi krishna - 7 months ago 20
HTML Question

Custom Font Awesome CSS

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:
What I Have

What is supposed to be

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

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