如何使用 Google Material Design Sprite 图标..？答案

【问题标题】：How to use Google Material Design Sprite icons..?如何使用 Google Material Design Sprite 图标..？
【发布时间】：2017-02-13 23:31:18
【问题描述】：

我正在尝试使用 Google Material Icons Sprite.. 他们提供的 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 被设置了多次，并且它需要 .icon 的第一个或最后一个值，具体取决于浏览器..

.icon { 背景图片: ---------

但是它的谷歌他们必须已经验证了他们的 CSS，你能指导它应该如何工作吗，我是 Sprites 的新手......

参考

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

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

请帮忙

【问题讨论】：

请在您的帖子中添加minimal reproducible example。
问题很简单，google 的 CSS 是使用 .icon { background-image: url ();在具有不同 URLS 的单个文件中超过两次...所以我无法获取所有图标。 :(
对于询问“为什么我的代码不能正常工作”的问题，您必须提供问题中问题的完整工作再现。 AKA 我们至少需要足够的 HTML 和 CSS 来自己重现这个问题。
第二次参考他们使用字体 none sprite imgs
为什么不用这个：design.google.com/icons？

标签： css sprite sprite-sheet google-material-icons

【解决方案1】：

试试这个

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

&lt;div class="iconBlack icon-ic_add_alert_black_24dp"&gt;&lt;/div&gt;

【讨论】：

这很好用，但我无法更改它包含在 google 提供的 Bower 包中的 CSS，并且有 20 多个 css 文件每个定义至少 10 次 ".icon{ ...} "类...