Topic: Icon class not work

allancmello pro asked 5 years ago


After updating my project to version 7.5.3 of Angular Pro MDB, most of the icons do not appear.I tried changing from fa to far, fas and it did not work.

This working:

   <ul class="text-lg-left list-unstyled ml-4">
         <li>
            <p><i class="fa fa-map-marker amber-text pr-2"></i>Espirito Santo, Brasil</p>
         </li>
         <li>
           <!---p><i class="fa fa-phone amber-text pr-2"></i>+55 27 3344 5688</p-->
         </li>
         <li>
            <p><i class="fa fa-envelope amber-text pr-2"></i>info@tecnopharmagroup.com.br</p>
         </li>
    </ul>

This not working:

<links>
            <hr class="hr-light my-4">
            <ul class="list-inline text-center list-unstyled">
              <li class="list-inline-item">
                <a class="p-2 fa-lg fa-ic">
                  <i class="fa fa-facebook indigo-text"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="p-2 fa-lg tw-ic">
                  <i class="fa fa-twitter cyan-text"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="p-2 fa-lg gp-ic">
                  <i class="fa fa-google-plus red-text"></i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="p-2 fa-lg ins-ic">
                  <i class="fa fa-instagram pink-text"> </i>
                </a>
              </li>
              <li class="list-inline-item">
                <a class="p-2 fa-lg li-ic">
                  <i class="fa fa-linkedin blue-text"> </i>
                </a>
              </li>
            </ul>
          </links>

Angular.json

            "styles": [
          {
            "input": "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss"
          },
          {
            "input": "node_modules/@fortawesome/fontawesome-free/scss/solid.scss"
          },
          {
            "input": "node_modules/@fortawesome/fontawesome-free/scss/regular.scss"
          },
          {
            "input": "node_modules/@fortawesome/fontawesome-free/scss/brands.scss"
          },

So I removed the following lines from angular.json as explained in some posts here, but it did not work!

 "styles": [
          /** "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss", */

Damian Gemza staff answered 5 years ago


Dear @allancmello

MDB Angular 7.5.3 uses Font Awesome 5. The 'fa' prefixes were used in FA4. You have to uncomment those FA5 styles import from the angular.json file, and then change those 'fa' classes in your icons.

Use the below classes:

  • 'fab' for the brands - eg. Twitter, Facebook,
  • 'fas' for the solid version,
  • 'far' for the regular (outline) version

There is how the Facebook icon should look like: <i class="fab fa-facebook indigo-text"></i>

Best Regards,

Damian


allancmello pro commented 5 years ago

Yes, I did that yesterday and it worked. Thanks, you can close this topic.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No