0

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.

1

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

| improve this answer | |
  • So just add template="Magento_Theme::html/social.phtml " and then declare the font awesome i elements in there? – Azul_Falcone Jun 19 '16 at 10:48
  • Yep, updated my answer with the code you need to do that. – circlesix Jun 19 '16 at 15:08
  • I created the phtml templates and have added in the ul to match both the Footer & Header links. I can inspect and see the elements (ul -> a) and if I put the text in it will appear. But the "i" class doesnt show. I have set it a height & width (background-color to check its there), but it wont render. I thought maybe the Font Awesome CDN might not be loading, but it appears in the network activity to be loading fine? – Azul_Falcone Jun 19 '16 at 20:10
  • I ran a test using <i class="fa fa-camera-retro"></i> fa-camera-retro in a phtml and it's showing up in my dev site. As long as the file is showing test in the right place, then i would assume you have everything set up in Magento correctly. Now it's just trouble shooting FA. Are you getting any of the elements showing up in the dom when you inspect it? Do you see the link to the CDN in the header when you view the source of the page? – circlesix Jun 20 '16 at 2:21
  • Yes, the element appears and if I place text inside <i class="fa fa-facebook fa-lg">Facebook</i> it will show (albeit in italics). I've checked the head and seen that Font Awesome is loading. Just tried changing the colour, incase it was something silly like that, but no luck. I can see the element in dev tools and it does add aria-hidden="true" so I guess its loading. But nothings showing. I'm starting to think its something really basic that I'm over looking? – Azul_Falcone Jun 20 '16 at 4:31
1

Did you inspect the network tab as well to check if the file you try to include via CDN really is loaded and not just listed as a link element?

| improve this answer | |
  • Have just checked and it has loaded. – Azul_Falcone Apr 29 '16 at 11:46
0

Try changing css href="..." into css src="..."

| improve this answer | |
  • Thanks for the idea. I tried it, but it didn't fix it. I think (though I have no reason why) that it's the <i> element? – Azul_Falcone Apr 29 '16 at 11:45
  • Hmm. Can you check if your element is correctly rendered? – Bartłomiej Szubert Apr 29 '16 at 12:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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