如何在CSS中引用聚合物图标
如何在CSS中引用聚合物图标
提问于 2014-10-10 19:42:51
我想知道是否可以使用高聚物的核心图标. file文件在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);
}我希望这样做，这样我就可以轻松地为图像滑块/其他插件创建更多的定制控件。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-05-01 19:04:48
您不能直接引用core-icons (或即将出现的iron-icons)以在CSS中使用，因为它们不作为文件/base64 64数据存在。如果您查看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>
...我希望这样做，这样我就可以轻松地为图像滑块/其他插件创建更多的定制控件。
高聚物的世界观是，元素是可组合的，core-icon也不例外，允许您在不直接使用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>这只是表面上的问题，我强烈建议阅读关于核心图标的文档，它提供了更多的示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26306955
复制相关文章
相似问题
腾讯云开发者
