How can I change these FontAwesome icons that came with my website?

user_11218314 0
Viewed 130

I got a website from HTML5UP to use as my portfolio. I am unable to figure out how to replace these icons that came prebuilt with the website. I don't mind using Font Awesome, I just do not know how to replace them as they aren't relevant.

For example:

   <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>

Current icon

I want to replace that class="icon featured fa-comments" with another image. I tried searching FA for one, obtained the HTML for it <i class="fas fa-industry"></i> but when I replace it, the formatting isn't the same.

If i change it to class="icon featured fa-industry" it doesn't work. Neither does class="icon featured fas fa-industry" And if I use <i class="fas fa-industry"></i> the icon is printed without formatting

Icon error

Icon without formatting

How can I change just the image? And keep the formatting.

EDIT: Below is a snippet of the main.css file if that helps

enter image description here

font-awesome css html
2 Answers

Seems like the template you are using has some custom CSS for the tag or the classes icon and featured. Therefore instead of using

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

Try with

<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>

user_123185180

I had the same problem as you, and I eventually figured it out. For the fa-industry icon, use:

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

If you wanted to use a brand icon, like fa-python, use:

<span class="icon featured brands fa-python"></span>
user_198794240
Related