跳到内容

颜色

默认情况下,所有图标的颜色值都是 currentColor。这个关键字会使用元素计算后的文本 color 值作为图标颜色。

可以在 MDN 的 currentColor 文档中了解更多。

使用 color 属性调整颜色

可以直接向图标元素传入 color 属性来调整颜色。

<!doctype html>
<html>
  <body>
    <i
      data-ycloud="smile"
      color="#3e9392"
    ></i>

    <script src="index.js"></script>
  </body>
</html>

使用父元素文本颜色

因为 YCloud Icons 使用 currentColor,所以图标颜色取决于当前元素计算后的 color,也可以从父元素继承。

例如,如果父元素的颜色值是 #fff,其中一个子元素是 YCloud Icons 图标,那么图标会渲染为 #fff。这是浏览器原生行为。

<!doctype html>
<html>
  <body>
    <button style="color: white">
      <i data-ycloud="thumbs-up"></i></button>

    <script src="index.js"></script>
  </body>
</html>

基于 ISC 许可证发布。