最短的bootstrap兼容方式，没有JavaScript:

.cameraicon {
    height: 1.6em; /* Set your own icon size */
    mask: url(/camera.svg); /* Path to your image */
   -webkit-mask: url(/camera.svg) no-repeat center;
}

像这样使用它:

<td class="text-center">
    <div class="bg-secondary cameraicon"/><!-- "bg-secondary" sets actual color of your icon -->
</td>

只有带有路径信息的SVG。你不能对图像这么做……作为路径，你可以改变笔画和填充信息，你就完成了。比如Adobe Illustrator

所以，通过CSS，你可以覆盖路径填充值:

path { fill: orange; }

但是如果你想要一个更灵活的方式，因为你想要在有一些悬停效果的时候用文本改变它，使用:

path { fill: currentColor; }

body { background: #ddd; text-align: center; padding-top: 2em; } .parent { width: 320px; height: 50px; display: block; transition: all 0.3s; cursor: pointer; padding: 12px; box-sizing: border-box; } /*** desired colors for children ***/ .parent{ color: #000; background: #def; } .parent:hover{ color: #fff; background: #85c1fc; } .parent span{ font-size: 18px; margin-right: 8px; font-weight: bold; font-family: 'Helvetica'; line-height: 26px; vertical-align: top; } .parent svg{ max-height: 26px; width: auto; display: inline; } /**** magic trick *****/ .parent svg path{ fill: currentcolor; } <div class='parent'> <span>TEXT WITH SVG</span> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32"> <path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path> </svg> </div>

如果你想使用CSS来改变颜色，你也可以使用这样的在线工具:使用CSS过滤器改变SVG颜色

这里是快速而愤怒的方式:)

body { background-color: #DEFF05; } svg { width: 30%; height: auto; } svg path { color: red; fill: currentcolor; } <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 514.666 514.666"><path d="M514.666,210.489L257.333,99.353L0,210.489l45.933,19.837v123.939h30V243.282l33.052,14.274v107.678l4.807,4.453 c2.011,1.862,50.328,45.625,143.542,45.625c93.213,0,141.53-43.763,143.541-45.626l4.807-4.452V257.557L514.666,210.489z M257.333,132.031L439,210.489l-181.667,78.458L75.666,210.489L257.333,132.031z M375.681,351.432 c-13.205,9.572-53.167,33.881-118.348,33.881c-65.23,0-105.203-24.345-118.348-33.875v-80.925l118.348,51.112l118.348-51.111 V351.432z"></path></svg>

要更改任何SVG的颜色，您可以通过在任何文本编辑器中打开SVG文件直接更改SVG代码。代码可能如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                 C181.113,454.921,171.371,464.663,161.629,474.404z"/>

    /* Some more code goes on */
    </g>
</svg>

您可以观察到有一些XML标记，如路径、圆、多边形等。在style属性的帮助下，您可以添加自己的颜色。请看下面的例子

<path fill="#AB7C94" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                        C181.113,454.921,171.371,464.663,161.629,474.404z"/>

将style属性添加到所有标记中，这样就可以获得所需颜色的SVG。

根据Daniel的评论，我们可以直接使用填充属性，而不是样式属性中的填充元素。

2020的答案

CSS过滤器适用于所有当前的浏览器

改变任何SVGs的颜色

Add the SVG image using an <img> tag. <img src="dotted-arrow.svg" class="filter-green"/> To filter to a specific color, use the following Codepen (click here to open the codepen) to convert a hexadecimal color code to a CSS filter: For example, output for #00EE00 is filter: invert(42%) sepia(93%) saturate(1352%) hue-rotate(87deg) brightness(119%) contrast(119%); Add the CSS filter into this class. .filter-green{ filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); }