How to Fix Website Icons Appear as Little Squares on My Screen

Need help with the Tech-side of blogging? Join my Facebook Group and get some answers.

You know all those nice looking fonts, the magnifying glass for search icon, the logo for Facebook, Pinterest, and Twitter (and others). Those icons are usually generated by Font-Awesome.

Disclosure: Please note that this article may contain affiliate links. You can read the full disclosure here.

If your website is using an older version of font-awesome, the icons may end up looking like little squares instead. So here are a few ways you can fix it.

Social Icons older Font awesome or not installed

Font-Awesome Updated or Installed

You can get the latest font-awesome file from here.

Install Using your Child Theme Header

Option 1. Add the link to the latest font awesome to your (child) theme header file. Here is a related post on setting up a child-theme, so that your changes are not lost when your theme updates.
How to Setup a Child Theme for your WordPress Blog

– no extra plugins to install

– you may break your site if you are not careful

**Make sure to take a backup of your website before you start** Instructions to backup with UpdraftPlus

First, you will need to login to your cPanel or FTP site on your host. You may also be able to do this from the WordPress file editor, however, on our sites this is disabled by our security settings.

The instructions contain examples from the Bluehost cPanel.
  1. Login to your Bluehost account
  2. Click Advanced
  3. Select the File Manager
  4. Screenshot of finding the Bluehost cpanel File Manager
  5. Navigate to your wordpress install theme folder
  6. This is the location of the default install folder, yours may be slightly different. "public_html/wp-content/themes/" screenshot of public html Screenshot of the Wordpress Themes Folder

    Note: If there is no header.php file in your child theme folder, you will need to copy over the header file from your theme.

    Go into your theme file folder. Right-click on the header.php file, select Copy

    If your theme is named like: “twentynineteen”, and you named your child theme “twentynineteen-child” then when prompted to copy, add “-child” to the theme name and click the copy files button.

    Screenshot Initial Screen when you click Copy


    Then go to the child theme folder and right click on the header.php file and first select to download a copy and save to your computer as a backup.

    Then right-click on the header.php file and select Edit

    Add the line of code before the <?php wp_wphead(); ?>:


    <?php wp_head(); ?>

    So that it looks like this now:

    <link rel="stylesheet" href="" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <?php wp_head(); ?>

    Then click the Save button to save your work, and clear your browser cache and any caching plugins you may be using.

    Once you have a Child Theme setup, it is easy to add your customizations as needed. Don’t forget to check how you can add the Google Analytics code to your Child Theme Header.



    Install using a Header Footer Plugin

    Option 2. Using a header/footer plugin; such as: Header Footer Code Manager.
    Install and activate the plugin. You only need to add the code in one location, so if you used Option 1, you are done.

    Pros of using a plugin:
    – It is quick to add the code.
    – You changes remain if you change themes

    Cons of using a plugin:
    – if the plugin fails it will stop working
    – plugins may slow down the loading of your site

    Then go to HFCM on your WordPress menu, and click “Add Snippet”
    screenshot of HFCM menu item

    Screenshot of hfcm add snippet

    Add the following:

    <!-- from: -->
    <link rel="stylesheet" href="" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

    Will look like this:
    Screenshot of Adding snippet

    Click Save to save your snippet.

    Then click the Save button to save your work, and clear your browser cache and any caching plugins you may be using.

    If you need assistance with this or any other issue, send me a message and we can arrange to work on the issue together. See my services page here.

    Got blogging questions? Join my Facebook group here WP Blogger Assist Questions

Avatar for Tara, WP Blogger Assist

Tara, WP Blogger Assist

I have over 15 years experience in IT. Over this time: managing server infrastructure, building websites and more. This website is dedicated to helping WordPress bloggers with setting up their blogs and websites; optimizing fast page loading, SEO and social media marketing - such as; Pinterest, Facebook and more.

5 thoughts on “How to Fix Website Icons Appear as Little Squares on My Screen

  • Avatar for Mitesh Parmar
    September 5, 2020 at 4:01 am

    Hi Tara,

    I tried both methods to my WP site which uses the OceanWP theme but to no avail.

    However, this issue is only occurring on the home page. All other pages show the magnification icon in the main menu and the email icon in the footer just fine.

    Would you happen to know of any other solutions please?

    • Avatar for Tara - WP Blogger Assist
      September 8, 2020 at 12:26 pm

      Hello Mitesh, I have just checked your homepage and I see the search magnifying glass. It may be that you need to clear your browser cache. If you use a caching plugin sometimes that also needs to be cleared for changes to show.

      • Avatar for Mitesh Parmar
        September 11, 2020 at 10:22 am

        Hi Tara,

        Thanks for getting back to me.

        Thank you so much for looking into this for me. I was going mad trying to resolve this issue, but checked on another computer and it is displayed correctly.

        Much appreciated.

        Thanks and regards,


  • Avatar for Boris
    September 20, 2020 at 6:55 am

    Hi Tara
    I have tried the plugin method and it’s working for me, Thank you very much

    • Avatar for Tara - WP Blogger Assist
      October 3, 2020 at 3:42 pm

      Hi Boris! Thanks for stopping by and I am glad that the plugin method helped you.


Leave a Reply

Your email address will not be published. Required fields are marked *