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。

Answer 2

尝试更改background-color图标。由于您使用的是svg图标，因此它不支持color

如果您使用<i class="fa fa-address-book-o" aria-hidden="true"></i>来实现字体真棒，可以按color: red

更改颜色

Answer 3

我不知道是否加载了影响我们改变颜色的字体的令人敬畏的图标，但你可以通过添加这个css来覆盖它的css属性来改变你的文本颜色：

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

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

3 个答案: