颜色css属性不影响字体真棒图标的颜色

Question

我无法在项目中更改字体真棒图标的颜色(使用css中的color属性).我认为我们加载字体真棒图标的方式可能会影响我们改变颜色的能力.

在有人将此标记为重复之前,请查看下面的jsfiddle.

您将从html(第7行和第10行)看到我们正在从我们自己的服务器加载一组预定义的fa图标.这是因为,由于我的组织工作的性质,我们不允许加载外部文件.

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

这是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>

这是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;
    }

要清楚,在我的开发环境中工作时,图标加载正常.我问的问题是:

加载字体真棒图标像我们一样(如jsfiddle所示)影响我们改变颜色的能力？

谢谢你的帮助!

Answer 1

您没有使用FontAwesome图标的字体版本.您正在使用SVG版本.

SVG不color用于更改形状的填充颜色.它使用fill.

您至少需要将CSS更改为使用fill而不是color.您可能还需要进行其他更改,但我无法确切地告诉您,因为您没有包含外部SVG文件.

另外,请注意外部<use>引用(如您使用的)在IE中不起作用(我最后检查过).如果您愿意,可能需要在HTML中内嵌SVG.