Question

我有一个div，其内容可以是 info 或 warning 样式，如下所示。（下划线用于取消该类对此特定示例案例的影响，因此无需在此范围内解决。）

dr.ItemArray.Select(c => c.ToString()).ToArray();

通过切换到

<div className="content info _warning">
  ...
  <div className="footer">
    <i className="fas fa-exclamation-triangle"></i>
  </div>
</div>

由下面的样式设置，我正在控制底部图标的颜色。

<div className="content _info warning">
  ...
</div>

问题是我也希望图标也能更改。如果要使用图像，则将所有图像都隐藏在所需的图像中，但那不使用可向量化的FontAwesome好东西。我考虑了一组具有不同内容的div，如下所示，但这似乎很笨拙。

...

是否有基于CSS的方法可用于更改下面的伪代码中显示的图标？

div.content.warning div.footer { ...
  color: burlywood;
}

div.content.info div.footer { ...
  background-color: fuchsia;
}

Answer 1

例如，您可以在CSS中使用：after伪选择器：

div.content.warning div.footer:after { ...
  content: "(Icon with .warning styles)"
}

div.content.info div.footer:after { ...
  content: "(Icon without .warning styles)"

}

如果您使用的是Font Awesome，则可以通过Javascript动态添加content属性

Answer 2

由于使用的是FontAwesome图标，因此应继续在不同元素上使用fa- *类，并使用自定义类将它们相应地隐藏。这就是我的意思：

<div class="footer">
  <div class="info-message">
    <i class="fa-info-icon"></i>
  </div>

  <div class="warning-message">
    <i class="fa-warning-icon"></i>
  </div>
</div>

在CSS中：

.footer .info-message,
.footer .warning-message {
  display: none;
}

.footer.info .info-message {
  display: block;
}

.footer.warning .warning-message {
  display: block;
}

因此，仅在页脚上提供.info或.warning即可显示适当的图标元素。

使用CSS类控制显示的图标/文本

2 个答案: