0

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>
Improve this question
4
  • I deleted my answer since it no longer made sense with your edit, here's my comment:
    – YourManDan
    Mar 2 at 16:16
  • Did you receive that css file to copy and paste to your site from Font Awesome? When I've gone and created a Font Awesome kit, they always provide a line of JS to paste into your site. I'd recommend doing that instead as there are relative links in your CSS code to files that aren't on your site. E.g. <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.
    – YourManDan
    Mar 2 at 16:17
  • Thank you so much, it worked perfectly when I used the html code from font awesome
    – Anas Dah
    Mar 2 at 18:22
  • Awesome! I'll post it as an answer then so you can upvote and/or mark it as accepted.
    – YourManDan
    Mar 2 at 19:05

2 Answers 2

Reset to default
-2

You should be using Font Awesome's provided <link> or <script> tag(s) that they give you with your kit. It should look like this:

<link rel="stylesheet" href="https://kit.fontawesome.com/xxxxx.css" crossorigin="anonymous">

or if you prefer the JS method:

<script src="https://kit.fontawesome.com/xxxxxxx.js" crossorigin="anonymous"></script>

Copying and pasting the code from their CSS file to your local one isn't advisable because there are relative links to Font Awesome custom fonts that can't/won't be included in your site's files. (As @Alexander Holsgrove points out)

Improve this answer
1

Your all.min.css font is loaded onto your site, but can you please check you have a webfonts directory with files such as fa-solid-900.woff and fa-solid-900.svg - At the bottom of the all.min.css file you will see the @font-face declarations and the required paths relative to your CSS file eg src:url(../webfonts/fa-solid-900.eot);

The CSS class names and font-family: "Font Awesome 5 Free" look fine otherwise, so I suspect it's just a case of missing the font files (or the path being incorrect)

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.