Question

我正在尝试为图标的背景（来自material-icons）着色但不超出其轮廓（下图中的图像）。

如此jsfiddle所示，我只能为背景着色，但它不完全适合图标。

.material-icons {
  background:white;
}

开始：

我想要得到的东西：

我成功做了什么：

我没有找到图标的填充版本。理想情况下，我不想使用其他字体来回答这个问题。是可以在CSS中执行此操作还是必须使用不同版本的图标？

Answer 1

在JSFiddle中使用绝对定位，15px乘15px div，边界半径50％为我工作。

https://msdn.microsoft.com/en-us/library/ms180199.aspx

HTML：

Main.mainStage.setOnShowing(new EventHandler<WindowEvent>() {
    @Override
    public void handle(WindowEvent event) {
        setKlientLabels();
    }
});
Main.mainStage.show();

CSS：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="block">
  <div class="icon">
    <p class="iconfix">
      <i class="material-icons" style="color:green">check_circle</i>
    </p>
  </div>
</div>

Answer 2

您应该将父div设为圆形，然后为其指定背景颜色。使用：

border-radius: 50%;

https://jsfiddle.net/507fsp46/

Answer 3

尝试包含CSS样式border-radius。

Relevant Fiddle

否则，您可以在。

中找到图标和颜色的PNG / SVG版本

Answer 4

＆＃13;

.block {
  width: 100px;
  height: 100px;
  background: grey;
}

.block i {
  color : green !important;
}

.material-icons{
  background:white !important;
}

＆＃13;

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="block">
    <i class="material-icons" style="color:green">check_circle</i>
</div>

＆＃13;

这与您正在寻找的相同吗？

这是JSFiddle

希望这有帮助。

Answer 5

您遇到的问题是您的图标看起来像这样，它是一个正方形的圆圈。

尝试使用this SVG 或this one。

matrices

.block {
  width: 100px;
  height: 100px;
  background: grey;
}

.whiteBackground {
  background-color: white;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.cls-1
{fill:green;}

.cls-2{fill:#fff;}

.orange{
  width: 25px;
}

Answer 6

另一种方法是直接在 svg 中绘制一个与图标轮廓匹配的圆圈。材质图标内的第一个 <path/> 是围绕实际图标路径的方框。这种方法用一个比图标轮廓略小的圆圈代替它，然后用一些颜色填充它。例如：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="24px" 
    viewBox="0 0 24 24" 
    width="24px" 
    fill="#000000">
    <path d="M0 0h24v24H0z" fill="none"/> <!-- square box to be replaced by a circle -->   
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

被替换为：

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="24px" 
    viewBox="0 0 24 24" 
    width="24px" 
    fill="#000000">
    <circle cx="12" cy="12" r="8" fill="#ffffff"/>
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

body {
  background-color: #6b6b69;
}

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    height="64px" 
    viewBox="0 0 24 24" 
    width="64px" 
    fill="#000000">
    <circle 
        cx="12" 
        cy="12" 
        r="8" 
        fill="#ffffff"/>
    <path 
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
</svg>

如何在图标中添加颜色？

6 个答案: