Color css property not affecting color of font awesome icons

Question

I'm unable to change the color of the font awesome icons in our project (using the color property in css). I think the way we're loading our font awesome icons might be affecting our ability to change their color.

Before someone marks this as a duplicate, please take a look at the jsfiddle below.

You will see, from the html (at lines 7 and 10) that we're loading in a pre-defined set of fa icons from our own server. This is because, due to the nature of my organisation's work, we're not permitted to load external files.

https://jsfiddle.net/moosefetcher/dnjjy015/1/

Here is the html:

<div class="page">
  <div id="fb-user-research">
    <span class="fb-checkbox">
      <input id="fb-user-research-checkbox" type="checkbox" name="fb-checkbox"/>
      <label for="fb-user-research-checkbox" id="fb-visible-checkbox">
        <svg class="unchecked fa-square-0">
          <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-square-o" />
        </svg>
        <svg class="checked fa-check-square">
          <use xlink:href="~/Areas/CL/Content/app/images/icons/icon-svg-defs.svg#fa-check-square" />
        </svg>
      </label>
    </span>
    <div id="fb-user-research-texts">
      <p>Placeholder text here</p>
      <p>Disclaimer here.</p>
    </div>
    <div class="clear"></div>
  </div>
</div>

And here's the css:

.page {
  background-color: #000000;
  height: 400px;
  padding: 15px;
}

#fb-user-research {
        border-radius: 3px;
        border: 1px solid #333333;
        margin: 44px 0px 14px 0px;
        padding: 15px 15px;
    }

    #fb-user-research input {
        border-radius: 2px;
        background-color: #333333;
    }

    #fb-user-research input {
        float: left;
    }

    #fb-user-research #fb-user-research-texts {
        width: 90%;
        float: left;
    }

    #fb-user-research div p {
        margin-bottom: 4px;
    }

    #fb-user-research div p:first-child {
        color: #ffffff;
    }

    #fb-user-research div p:last-child {
        color: #888888;
        font-size: 0.75em;
    }
    .fb-checkbox {
            margin-right: 20px;
        }

        #fb-user-research #fb-user-research-texts {
            width: 85%;
            float: left;
        }
        .fb-checkbox > [type="checkbox"] {
        width: 0;
        height: 0;
        display: none;
        opacity: 0;
    }

    .fb-checkbox {
        position: relative;
        float: left;
        margin-right: 10px;
    }

    .fb-checkbox > input[type=checkbox]:checked ~  #fb-visible-checkbox .checked {
        display: inline-block;
        opacity: 1;
        color: #0099dd;
    }

    .fb-checkbox > input[type=checkbox]:checked ~  #fb-visible-checkbox .unchecked {
        display: none;
        opacity: 0;
    }

    #fb-visible-checkbox > svg {
        position: relative;
        top: 0px;
        left: 0px;
        width: 18px;
        height: 18px;
        cursor: pointer;
        font-size: 18px;        
    }

    #fb-visible-checkbox .unchecked {
        background-color: grey;
        color: #ffffff;
    }

    #fb-visible-checkbox .checked {
        background-color: lightgrey;
        color: #0099dd;
        display: none;
        opacity: 0;
    }

    .clear {
      clear: both;
    }

To be clear, when working in my dev environment, the icons load fine. The question I'm asking is:

Is loading the font awesome icons like we do (as shown in the jsfiddle) affecting our ability to change their color?

Thanks for any help!

Answer 1

You are not using the font version of the FontAwesome icons. You are using the SVG versions.

SVG doesn't use color to change the fill color of shapes. It uses fill.

You will need to at least change the CSS to using fill instead of color. You might also need to make other changes, but I can't tell you for sure because you haven't included your external SVG file.

Also, be aware that external <use> references, like you are using, don't work in IE (last I checked). You may need to inline your SVG in your HTML if you care about that.

Answer 2

Try changing background-color of icons. Since you use svg icons, it wont support color

If you are using <i class="fa fa-address-book-o" aria-hidden="true"></i> for implementing font awesome, you change the color by color: red

Answer 3

I don't know if loading the font awesome icon affecting our ability to change their color, but you can change your text color by overriding its css property by adding this css:

 #fb-user-research #fb-user-research-texts p{
        color: red;
    }