0

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

我已经尝试了这个问题的大部分答案：我可以更改 Font Awesome 图标颜色的颜色吗？ 他们都没有工作。

我还尝试将其包装在标签中或

<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.

谢谢。

4

3 回答 3

6

图标系统下方是插入标签的 svg，因此您只需设置 svg 的样式。

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

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

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

于 2017-10-18T19:50:39.277 回答
1

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

使用 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;
    }
}
于 2021-04-15T16:09:39.730 回答
0

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

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

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

于 2020-06-04T19:09:05.087 回答