Magento2 Layout – Best Way to Add Font Awesome Icons into Header Links

layoutmagento2xml

Will this work? 

<argument name="label" xsi:type="string"> 
    <i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
</argument>

EDIT – I am trying to add font awesome icons into the header.panel and footer. Thanks to comments here, I added phtml templates into the blocks in the default.xml, referenced the correct containers and now the custom ul>li>a are rendering. However the font awesome i class and icons wont show. The cdn is loading (checked in chrome developer) and I set a width and height to the .fa class. still they aren't appearing.

Best Answer

No, this won't work. You cannot mix HTML code with XML code in a layout default.xml file.

In app/design/frontend/Magento/luma/Magento_Customer/layout/default.xml you can see for example how the header links are added:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="header.links">
            <block class="Magento\Customer\Block\Account\Customer" name="customer" template="account/customer.phtml" before="-"/>
            <block class="Magento\Customer\Block\Account\AuthorizationLink" name="authorization-link-login" template="account/link/authorization.phtml"/>
        </referenceBlock>
    </body>
</page>

The customer.phtml template file looks like this:

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php if($block->customerLoggedIn()): ?>
    <li class="customer-welcome">
        <span class="customer-name"
              role="link"
              tabindex="0"
              data-mage-init='{"dropdown":{}}'
              data-toggle="dropdown"
              data-trigger-keypress-button="true"
              data-bind="scope: 'customer'">
            <span data-bind="text: customer().fullname"></span>
            <button type="button"
                    class="action switch"
                    tabindex="-1"
                    data-action="customer-menu-toggle">
                <span><?php /* @escapeNotVerified */ echo __('Change')?></span>
            </button>
        </span>
        <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "customer": {
                            "component": "Magento_Customer/js/view/customer"
                        }
                    }
                }
            }
        }
        </script>
        <?php if($block->getChildHtml()):?>
        <div class="customer-menu" data-target="dropdown">
            <?php echo $block->getChildHtml();?>
        </div>
        <?php endif; ?>
    </li>
<?php endif; ?>

As you can see, the CSS classes are added there.

How to add the fontawsome CSS classes

The easiest thing would be to override these files (for example account/customer.phtml and add the fontawesome css class tags in these templates. You have to copy the account/customer.phtml to your own theme and adjust the css classes there. Do not overwrite coure files :-)

Related Topic