Which icon or FontAwesome icon isn't loading?

1

So I have started using child menus on a site I manage - www.gaug.co.uk and I am getting a square box next to it, but can’t for the life of me find which FontAwesome pack or icon is missing.

Can anyone help? :slight_smile:

2

@techielass, Comparing your site and the demo site of Antimatter, you seem to be missing ‘line-awesome.min.css’.

That file loads font-family: FontAwesome.

3

Not sure that’s it to be honest, the line-awesome.min.css does exist in my code repo and other FontAwesome files load as you can see from the footer bar…

4

@techielass, The icons in your page are defined in two different ways:

  • In the footer by inserting <i class="fab fa-1x fa-facebook"></i>
    This definition comes from file ‘all.min.css’
  • In the navbar by using css:
    #header #navbar .has-children>a>span:after {
    font-family: FontAwesome;  /* FontAwesome 4.7 */
    content: '\f107';
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 4px;
}
    Only this one is broken.

On August 6, 2018, your have created a pull request on the repo of Antimatter to replace font-awesome 4.7 with 5.2. You replaced file css/font-awesome.min.css with css/all.min.css.

It is in css/font-awesome.min.css where the font-family FontAwesome is defined. The new font awesome 5.2 uses font-family: “Font Awesome 5 Free”, but parts of Antimatter still refers to the old font-family

Could it be this caused the issue, but you didn’t notice it before?

Two alternative fixes:

Fix 1:

  • Replace the css in your /css-compiled/template.css:
    From:
    #header #navbar .has-children>a>span:after {
    font-family: FontAwesome;                /* FontAwesome 4.7 */
    content: '\f107';
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 4px;
}
    into:
    #header #navbar .has-children>a>span:after {
    font-family: "Font Awesome 5 Free";      /* FontAwesome 5+ */
    font-style: normal;                      /* required */
    font-weight: 900;                        /* required */
    content: '\f107';
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 4px;

Fix 2:

  • In file `/templates/partials/navigation.html.twig’ replace line 9:
    <span></span>
    with:
    <i class="fa fa-angle-down" aria-hidden="true"></i>
5

@techielass, Any progress?

1 Like
6

Thanks fix 2 worked for me. :slight_smile: