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

Sharing is caring!

Disclosure: Please note that this article may contain affiliate links. You can read my full disclosure here.
    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.

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

Pros:
– no extra plugins to install

Cons:
– 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.

    Before:
    Screenshot Initial Screen when you click Copy

    After:

    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(); ?>
    </head>

    So that it looks like this now:


    ...
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <?php wp_head(); ?>
    </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: https://fontawesome.com/start -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" 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 Advanced WordPress user with coding knowledge? Advanced Coding on WordPress

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.

Leave a Reply

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