如何将Material Design图标用作CSS背景图像值？

Question

我正在使用materializecss,所以我已经有了材料设计图标.如何background-image在CSS代码中使用它们作为值(实际上是SASS)？

Answer 1

如果您正在使用"材质图标字体",则可以使用的另一种技术是使用:before和:after伪选择器+ html entities.

CSS (codepen示例)

.someclass:before { 
    content: "\E3E7"; 
    font-family: "Material Icons"; 
}

它不完全是一个background-image但仍然有用.

Answer 2

您可以使用Material Design Icons的SVG代码来设置背景图像,例如:

.selector {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="%232196F3" d="M 5,3L 19,3L 20.7359,6L 20.7304,6C 20.9018,6.29149 21,6.63428 21,7L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,7C 3,6.638 3.09618,6.29846 3.26437,6L 3.26135,6L 5,3 Z M 5.57294,4L 5,5L 5,5L 19,5L 18.4303,4L 5.57294,4 Z M 7,12L 12,17L 17,12L 14,12L 14,10L 10,10L 10,12L 7,12 Z "></path></svg>');
}

小提琴

我注意到/在制作小提琴时被提醒的怪癖:

• 如果没有xmlns属性,它似乎不起作用
• #填充或其他地方的A 需要转义%23(或使用rgb(a)值代替)
• 您可能需要根据需要调整宽度和高度以及viewBox属性(是否填充区域,重复或不重复(也可以影响background-repeat),等等)