1

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.

3
  • Thanks for fixing the formatting. How did you get it to accept the elements? Jun 17 '16 at 9:44
  • Hi, could you please update your question with some more information like: which file(s) are you editing? How did you include the font-awesome font to the site etc? Jun 17 '16 at 23:52
  • Yes, I was editing <vendor><theme> -> Magento_Theme -> layout -> default.xml. I added font awesome into default_head_blocks.xml. Jun 18 '16 at 19:08
4

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 :-)

5
  • Nah, this didn't help me out unfortunately. I need to apply fa classes to li.nav.item. Jun 18 '16 at 20:45
  • 1
    Just to be clear, the only place I can find on a default Magento install with the luma theme for li.nav.item is in the footer links. Is this is where you want to place the icons? If not, where are you looking to place them? It will change the answer you need.
    – circlesix
    Jun 18 '16 at 22:16
  • Could you please update your question or add some more details what exactly you want to change @Azul_Falcone? Jun 19 '16 at 19:11
  • I added this to my Magento_Theme default.xml <referenceContainer name="header.panel"> <container name="social_header" htmlClass="header links" htmlTag="ul" before="contact-us"> <block class="Magento\Framework\View\Element\Template" name="social.header" template="Magento_Theme::html/social-header.phtml"/></container></referenceContainer> Jun 19 '16 at 20:27
  • Is post updated on how you solved it? Can you post your answer here please? I have similar question.
    – camdixon
    Jul 28 '16 at 8:29

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.