I have been trying to migrate my html css and javascript static website to a wordpress dynamic theme. Everything worked fine and looks perfect but for some reason my font awesome icons appear as squares.
This is the website https://www.anasdahshan.me
if anyone can help me it would be great thank you so much.
<!-- Font Awesome Icon -->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/all.min.css" />
<ul class="social-icons ml-md-n2 justify-content-center justify-content-md-start">
<li class="social-icons-linkedin"><a data-toggle="tooltip" href="https://www.linkedin.com/in/" target="_blank" title="LinkedIn" data-original-title="LinkedIn"><i class="fab fa-linkedin"></i></a></li>
<li class="social-icons-github"><a data-toggle="tooltip" href="https://github.com/" target="_blank" title="Github" data-original-title="GitHub"><i class="fab fa-github"></i></a></li>
<li class="social-icons-twitter"><a data-toggle="tooltip" href="https://twitter.com/" target="_blank" title="Twitter" data-original-title="Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="social-icons-instagram"><a data-toggle="tooltip" href="https://instagram.com/" target="_blank" title="Instagram" data-original-title="Instagram"><i class="fab fa-instagram"></i></a></li>
</ul>
Solution: Just use the html code given with the font awesome kit without adding any php tags.
The html should be:
<link rel="stylesheet" href="https://kit.fontawesome.com/xxxxx.css" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://kit.fontawesome.com/abc123.css" crossorigin="anonymous">
Note that for version 5 of FA the only accepted way on their site is using JS.