我如何在React App中使用:: before CSS伪选择器来修改Font Awesome Icon？

Question

我有一个React应用，其中我正在使用FontAwesomeIcon：

< FontAwesomeIcon icon="chart-line" size="lg" className="icon trendingIcon"/>

它显示图表线图标，但是我试图使用此小提琴中的内容来摆脱代表该图标上x和y轴的线： https://jsfiddle.net/3uvkqowo/4/

但是它不起作用。我通过使用以下方式启用了searchPseudoElements：

window.FontAwesomeConfig = {
    searchPseudoElements: true
};

由于某些原因，未应用css中的:: before。

css类“ icon”和“ trendingIcon”定义为：

.icon {
padding-right: 2%;
}

.trendingIcon {
padding-top: 1%;
padding-right: 6%;
}

Answer 1

如果您愿意使用FontAwesome的Power Transforms（这就是您在react-fontawesome中的用法），则只需将图标向下和向左平移，而不必使用CSS伪选择器。

这是一个code sandbox，显示了此操作。

您的JSX看起来像这样：

 <FontAwesomeIcon
        id="edited"
        icon={faChartLine}
        size="lg"
        className="icon trending-icon"
        fixedWidth
        transform="down-4 left-4"
      />

您的CSS如下所示：

svg.icon[data-icon="chart-line"] {
  overflow:hidden;
}

结果如下：