带图标的FCC产品着陆页问题

Question

我正在构建freecodecamp产品着陆页，并且我被困了很长时间，找不到问题。

我正在尝试在文本内容之前添加图标，就像在FCC示例中一样（之前：高级材料，快速发货，质量保证）。HERE 1

在我自己的页面HERE 2上，我根本无法修改.icons，请注意我添加到.icons的样式没有任何作用，而且我不知道如何处理将它们放在文字前面，例如在FCC示例中。我已经尝试了很多方法，但是什么也没做，就像它甚至找不到我创建的.icon类一样。

#features .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 125px;
        width: 20vw;
        color: darkorange;
      }

请帮助

编辑：解决了一个问题。我知道如何在文字前面加上图标。

但是主要问题仍然存在。 CSS不能以某种方式识别以上代码。我试图将其标记为重要，但仍然没有。

Edit2：我只是将没有响应的代码移到了整个代码的底部，一切都神奇地开始工作了。不知道为什么，它不喜欢它以前的位置。

Answer 1

您应在包含的div（.grid）上使用searchPet()而不是图标，如下所示：

display: flex

Answer 2

我不知道确切的问题是什么。但是一切突然开始起作用，我将没有响应的代码移到了最底层。我猜它不喜欢代码中的位置。