css - 如何在 CSS 中引用 Polymer 图标

Question

我想知道是否可以使用 Polymer 的 core-icons.html 文件在 CSS 中将图标显示为背景图像。我想要的是在我的样式表中引用一个图标，如下所示:

#arrow-forward {
    background-image: url(route to polymer icon/arrow-forward.svg);
}

到目前为止我已经尝试过但没有成功:

#arrow-forward {
    background-image: url(bower_components/core-icons/core-icons.html/arrow-forward.svg);
}

我想这样做，以便我可以轻松地为图像 slider /其他插件创建更多自定义控件。

Answer 1

您无法直接引用 core-icons(或即将推出的 iron-icons)在 CSS 中使用，因为它们不作为文件/base64 数据存在。如果您查看 core-icons.html 的源代码，您就会明白为什么您的引用不起作用；图标是 svg 路径:

<!--
...
@group Polymer Core Elements
@homepage polymer.github.io
-->
<link rel="import" href="../core-icon/core-icon.html">
<link rel="import" href="../core-iconset-svg/core-iconset-svg.html">
<core-iconset-svg id="icons" iconSize="24">
<svg><defs>
<g id="3d-rotation"><path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z"/></g>
<g id="accessibility"><path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z"/></g>
...

I'm wanting to do this so that I can easily create more customized controls for image sliders/other plugins.

Polymer 的世界观是元素是可组合的，core-icon 也不异常(exception)，它允许您在不直接在 css 中使用 svg 的情况下实现您的目标。

您可以设置core-icon的样式:

<style>
  core-icon[icon="cancel"] {
    color: red;
    width: 48px;
    height: 48px;
  }
</style>
<core-icon icon="cancel"></core-icon>

您也可以使用 core-icon 组合其他元素:

<core-menu-button icon="menu">
  <core-item icon="settings" label="Settings"></core-item>
</core-menu-button>

这仅触及表面，我强烈建议阅读the documentation on core-icon ，其中给出了更多示例。