Is there any difference between fas fa-* and fa fa-*

[sreyaskumar40]

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
  font-family: Lobster, Monospace;
}

.thick-green-border {
  border-color: green;
  border-width: 10px;
  border-style: solid;
  border-radius: 50%;
}

</style>

<div class="container-fluid">
<div class="row">
  <div class="col-xs-8">
    <h2 class="text-primary text-center">CatPhotoApp</h2>
  </div>
  <div class="col-xs-4">
    <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
  </div>
</div>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
<div class="row">
  <div class="col-xs-4">
    <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
  </div>
  <div class="col-xs-4">
    <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
  </div>
  <div class="col-xs-4">
    <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
  </div>
</div>
<p>Things cats <span class="text-danger">love:</span></p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <div class="row">
    <div class="col-xs-6">
      <label><input type="radio" name="indoor-outdoor"> Indoor</label>
    </div>
    <div class="col-xs-6">
      <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      <label><input type="checkbox" name="personality"> Loving</label>
    </div>
    <div class="col-xs-4">
      <label><input type="checkbox" name="personality"> Lazy</label>
    </div>
    <div class="col-xs-4">
      <label><input type="checkbox" name="personality"> Crazy</label>
    </div>
  </div>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</div>

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36

Challenge: Style Text Inputs as Form Controls

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

That is an open source project so you can actually go see for yourself here.

I see this:

.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}

And then I see things like this:

.fa-github:before {
  content: "\f09b";
}

So, I would guess that the class fa just sets up general things that all the icons need and the fa-* classes do things specific to those icons. That way they don’t need to write out the stuff in the fa class for each and every icon.

[lasjorg]

There are some differences between versions, fa is the old V4 class name. I think most fas icons still work with fa. They also have some shims to help with migration but I’m sure they have tried to make as few breaking changes as possible.

Upgrading from Version 4

Font Awesome

Edit: The challenges are using V4