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

Well, the FontAwesome icon isn't exactly what you want. For starters, it doesn't have a border, so even if you get the background color transparent, you won't have the white border. I suggest creating the 'icon' yourself. Try something like this:

HTML:

<div class="exclamation-circle">
    &#x21;
</div>

CSS:

.exclamation-circle {
    color: white;
    width: 30px;
    height: 30px;
    font-size: 1em;
    font-weight: bold;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 50%;
    text-align: center;
}

you can play with the font-size, div width and height (make sure width = height to make it a perfect circle), and border thickness, but it should pretty much cover your needs.

Here's a working example: https://jsfiddle.net/k61gaf9z/

Answer 2

I would suggesting changing the icon class to fa-exclamation . Alternatively you can change the unicode to "\\f12a" and add a white border with border-radius. Set the width equal to the icon height and center the icon within.

Something like this:

.exclamation-red {
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    width: /* set this to the same as the icon height */
    text-align: center;
}

.exclamation-red:before {
    content: "\f12a";
    color: #FFFFFF;
}

Feel free to fiddle around with the values in order to get closer to exactly what you're looking for.

Also if you weren't limited to only CSS, you could stack the exclamation and circle-thin icons

Answer 3

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