Is my question strange? I've noticed a peculiar behavior when using fontawesome. Normally, it displays correctly, and I have already referred to the documentation, but none of the solutions I found here seem to solve my issue.
Sources I have tried:
FontAwesome icons not showing. Why?
Why some of the Font Awesome icons do not show
Font Awesome is not showing the icon
None of the answers provided have resolved my problem.
In my stylesheet, I am utilizing an external link from Font Awesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
This is what I want to display:
<div id="whatsapp-go"><a target="_blank" href="#"><i class="fab fa-whatsapp"></i></a></div>
<div id="back-to-top"><i class="fas fa-arrow-up"></i></div>
Only the arrow icon appears, not the WhatsApp icon.
The image of the icon that doesn't show up
However, the icon shows without any problem when used in another element:
Icon shows without issues
Here is the code where the icon shows up:
<ul class="footer-follow">
<li>
<a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fa fa-envelope-square fa-2x" alt="#"></i></a>
</li>
<li>
<a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-whatsapp fa-2x"></i></a>
</li>
<li>
<a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-instagram fa-2x"> </i></a>
</li>
<li>
<a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
</li>
<li>
<a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-youtube fa-2x"></i></a>
</li>
</ul>
Can anyone assist me with this?
CSS file :
/*------------------------------------*\
Back to top
\*------------------------------------*/
#back-to-top {
display:block;
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #0bb89e;
border-radius:50px;
color: #FFF;
z-index: 9999;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
cursor: pointer;
}
#back-to-top:hover {
opacity: 0.8;
}
/*------------------------------------*\
Whatsapp-go
\*------------------------------------*/
#whatsapp-go {
display:block;
position: fixed;
bottom: 80px;
right: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #0bb89e;
border-radius:50px;
color: #FFF;
z-index: 9999;
-webkit-transition: 0.2s opacity;
transition: 0.2s opacity;
cursor: pointer;
}
#whatsapp-go:hover {
opacity: 0.8;
}