html - 如何更改网站附带的这些 FontAwesome 图标？

Question

我从 HTML5UP 获得了一个网站作为我的作品集。我无法弄清楚如何替换网站预建的这些图标。我不介意使用 Font Awesome，我只是不知道如何替换它们，因为它们不相关。

例如：

   <div class="col-4 col-6-medium col-12-small">
            <section class="box style1">
              <span class="icon featured fa-comments"></span>
              <h3>Lean, Six Sigma, Kaizen, Kanban and 5S</h3>
              <p>
                Applicable to both software and industrial settings.
              </p>
            </section>

我想class="icon featured fa-comments"用另一个图像替换它。我尝试在 FA 中搜索一个，获得了它的 HTML，<i class="fas fa-industry"></i>但是当我替换它时，格式不一样。

如果我将其更改为class="icon featured fa-industry"它不起作用。也没有class="icon featured fas fa-industry"如果我使用<i class="fas fa-industry"></i> 该图标打印而不格式化

如何仅更改图像？并保留格式。

编辑：如果有帮助，下面是 main.css 文件的片段

---

Answer 1

似乎您使用的模板有一些自定义 CSS 用于标签或类图标和特色。因此，而不是使用

<i class="fas fa-industry"></i>

尝试

<span class="icon featured fas fa-industry"></span>

.icon {
  font-size: 36pt;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />


<div class="col-4 col-6-medium col-12-small">
  <section class="box style1">
    <span class="icon featured fas fa-industry"></span>
    <h3>Lean, Six Sigma, Kaizen, Kanban and 5S</h3>
    <p>
      Applicable to both software and industrial settings.
    </p>
  </section>
</div>