如何使用谷歌素材设计精灵图标…

Question

我正在尝试使用谷歌材料图标精灵..他们提供的CSS是这样的

.icon {
  background-image: url(../images/sprite-alert-white.PNG);
}
.icon-ic_add_alert_white_24dp {
  background-position: -0px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_outline_white_24dp {
  background-position: -32px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_white_24dp {
  background-position: -0px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_warning_white_24dp {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
}
.icon {
  background-image: url(../images/sprite-alert-black.PNG);
}
.icon-ic_add_alert_black_24dp {
  background-position: -0px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_black_24dp {
  background-position: -32px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_error_outline_black_24dp {
  background-position: -0px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_warning_black_24dp {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
}
.icon {
  background-image: url(../images/sprite-toggle-white.PNG);
}
.icon-ic_check_box_outline_blank_white_24dp {
  background-position: -0px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_check_box_white_24dp {
  background-position: -32px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_indeterminate_check_box_white_24dp {
  background-position: -0px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_radio_button_checked_white_24dp {
  background-position: -32px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_radio_button_unchecked_white_24dp {
  background-position: -64px -0px;
  width: 32px;
  height: 32px;
}
.icon-ic_star_border_white_24dp {
  background-position: -64px -32px;
  width: 32px;
  height: 32px;
}
.icon-ic_star_half_white_24dp {
  background-position: -0px -64px;
  width: 32px;
  height: 32px;
}
.icon-ic_star_white_24dp {
  background-position: -32px -64px;
  width: 32px;
  height: 32px;
}
.icon {
  background-image: url(../images/sprite-toggle-black.PNG);
}

混淆是当我试图使用

时

<div class="icon icon-ic_add_alert_white_24dp"></div>

它工作很棒…但是当我把这个…

 <div class="icon icon-ic_add_alert_black_24dp"></div>

它不工作…我认为是因为。icon设置多次，它需要的第一个或最后一个值。图标取决于浏览器。

。图标{background-image: ---------

但这是谷歌，他们必须验证他们的CSS，你能指导它应该如何工作，我是新的精灵…

REF

https://github.com/google/material-design-icons/tree/master/sprites

1)https://design.google.com/icons/

2)

请帮

Answer 1

try this

.icon {
  background-image: url(../images/sprite-alert-white.PNG);
}
.iconBlack {
  background-image: url(../images/sprite-alert-black.PNG);
}

<div class="iconBlack icon-ic_add_alert_black_24dp"></div>