Magento 2 – Font Awesome Icons Not Rendering in Top Links

headermagento2

I have added the Font Awesome cdn link in my header.

(default_head_block.xml)

css rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" src_type="url"/>

Then added the link to facebook in the top links

(default.xml)
block 

class="Magento\Framework\View\Element\Html\Link\Current" name="facebook" before="-"

arguments

 argument

 name="label" xsi:type="string" i class="fa fa-facebook fa-2x" /i>

/argument

argument name="path" xsi:type="string">https://www.facebook.com/ 

/argument

/arguments

/block

I have cleared the cache and reindexed. But the element doesnt seem to render.

I can see the FB link, but the icon wont show.
Also, the Font Awesome CDN appears in the header so I know its loading.

What am I doing wrong?
Cheers.

Best Answer

You cannot mix a HTML element in Magento's XML. The XML parser for the current link class takes a string.

If you look in the class Magento\Framework\View\Element\Html\Link\Current 

/**
 * Render block HTML
 *
 * @return string
 */
protected function _toHtml()
{
    if (false != $this->getTemplate()) {
        return parent::_toHtml();
    }

    $highlight = '';

    if ($this->getIsHighlighted()) {
        $highlight = ' current';
    }

    if ($this->isCurrent()) {
        $html = '<li class="nav item current">';
        $html .= '<strong>'
            . $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getLabel()))
            . '</strong>';
        $html .= '</li>';
    } else {
        $html = '<li class="nav item' . $highlight . '"><a href="' . $this->escapeHtml($this->getHref()) . '"';
        $html .= $this->getTitle()
            ? ' title="' . $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getTitle())) . '"'
            : '';
        $html .= $this->getAttributesHtml() . '>';

        if ($this->getIsHighlighted()) {
            $html .= '<strong>';
        }

        $html .= $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getLabel()));

        if ($this->getIsHighlighted()) {
            $html .= '</strong>';
        }

        $html .= '</a></li>';
    }

    return $html;
}

You will see $this->escapeHtml((string)new \Magento\Framework\Phrase($this->getLabel())) this call to escape the HTML. So your call to the font is stripped out before it's rendered.

The only way I have been able to get this to work is to place the call to the icon in a .phtml. So in your case, you might just call a template file from the default.xml you are using and call the icons in there. This would be how you would pull a template into the footer container:

<referenceContainer name="footer-container">
    <container name="social_footer" label="Social Footer" htmlTag="div" htmlClass="social-footer" before="-">
        <block class="Magento\Framework\View\Element\Template" name="social.footer" template="Magento_Theme::html/custom-social.phtml"/>
    </container>
</referenceContainer>

And then create a file at app/design/frontend/{{Vendor}}/{{Theme}}/Magento_Theme/templates/html/custom-social.phtml

Related Topic