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);
}

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

Answer 1

您不能直接引用core-icons（或即将发布的iron-icons）以便在CSS中使用，因为它们不作为files / 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>
...

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

Polymer的世界观是元素是可组合的，core-icon也不例外，让你无需在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，这会提供更多示例。

如何在CSS中引用聚合物图标

1 个答案: