html - FCC 产品着陆页图标问题

Question

我正在构建 freecodecamp 产品登陆页面，我已经卡了很长时间，我找不到问题。

我正在尝试在文本内容之前添加图标，就像在 FCC 示例中一样(之前:优质 Material 、快速运输、质量保证)。 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) 而不是图标上使用 display: flex，如下所示:

.grid {
  display: flex;
}