Question

我已经从icomoom下载了一些图标，但图标背景颜色是黑白的。我想给自己的颜色。可以告诉我怎么办？

当我下载图标时，我得到了以下style.css

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-haa506');
    src:url('fonts/icomoon.eot?#iefix-haa506') format('embedded-opentype'),
        url('fonts/icomoon.woff?-haa506') format('woff'),
        url('fonts/icomoon.ttf?-haa506') format('truetype'),
        url('fonts/icomoon.svg?-haa506#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
    content: "\e600";
}
.icon-images:before {
    content: "\e601";
}
.icon-pawn:before {
    content: "\e602";
}

Answer 1

图标应视为文字。

如果您为它们应用颜色。他们会改变他们的颜色。

示例：

.icon-pawn { color: red; }

Answer 2

我必须使用:: after伪元素。

// REMAINING $products for($i = min(count($products), count($recipes)); $i < count($products); $i++){ echo '<div class="item">'; echo '<div class="title"><a href="/product/' . $products[$i]['id'] . '">' . $products[$i]['title'] . '</a></div>'; echo '<div class="image"><a href="/product/' . $products[$i]['id'] . '">' . $products[$i]['image'] . '</a></div>'; echo '</div>'; } // REMAINING $recipes for($i = min(count($products), count($recipes)); $i < count($recipes); $i++){ echo '<div class="item">'; echo '<div class="title"><a href="/recipe/' . $recipes[$i]['id'] . '">' . $recipes[$i]['title'] . '</a></div>'; echo '<div class="image"><a href="/recipe/' . $recipes[$i]['id'] . '">' . $recipes[$i]['image'] . '</a></div>'; echo '</div>'; }

我不确定这是否对我的项目来说是特殊的，因为我正在对其他人的代码进行小的更改。

Answer 3

这对我有用：

.icon-color-success:before {
    color: #28a745 !important;
}

然后：

<i class="icon-python icon-color-success"></i>

如何更改icomoon图标的图标颜色

3 个答案: