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.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- 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