Question

如何更改UIkit图标的颜色。我正在使用反应组件。具体来说，我想更改分隔符图标的颜色：https://getuikit.com/docs/divider

我在这个问题中尝试了大部分答案：Can I change the color of Font Awesome's icon color? 他们都没有工作。

我也尝试将其包装在标签或

中

<i style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></i>
<div style={{color: 'rgba(0, 0, 0, 1)'}} className="uk-divider-icon"></div>

我想更改图标本身的颜色而不是背景或其他css，因为使用style可以轻松更改这些颜色。

感谢。

Answer 1

在图标系统下面是svg插入标签，所以你只需设置svg样式。

.span[uk-icon=*] svg{
    color:black;
}

.span[uk-icon=*] svg path{
    fill: green;
}

当然，您可以将自己的类添加到包含uk-icon的元素中，以便更具体。

Answer 2

有点晚了，但可能会对这里的新人有所帮助！

使用 uikit 文档格式：

  <div class="rounded-button">
     <span uk-icon="plus"></span>
  </div>

还有我的 .scss：

.rounded-button {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  
    span{
     color: white;
    }
}

Answer 3

这是另一个示例，我使用的是星标图标：

HTML：

<span class="uk-icon" uk-icon="icon:star"></span>

如果您对此进行检查，则会看到它扩展为：

<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="star"><polygon fill="none" stroke="#000" stroke-width="1.01" points="10 2 12.63 7.27 18.5 8.12 14.25 12.22 15.25 18 10 15.27 4.75 18 5.75 12.22 1.5 8.12 7.37 7.27"></polygon></svg>

例如，制作一个具有黑色轮廓和黄色填充的星星：

.uk-icon[uk-icon="icon:star"] svg {
    color: black;
}

.uk-icon[uk-icon="icon:star"] svg polygon{
    fill: yellow;
}

我只是想弄清楚这些东西，所以如果我犯了一个错误，我希望有人会纠正我，但这似乎对我有用。

在更新中更改UIkit图标的颜色

3 个答案: