Magento2 Font Awesome – How to Add Using Library

font-awesomelibrarymagento2

in my case, I have added this font awesome by declaring it in the header.

is there any way to inject this font awesome by libraries on the resource of my module and not call it externally by link

Best Answer

You need to download the fontawesome zip package and add the required css files under your theme. Steps to add the CSS files in your theme:

Go to directory app/design/frontend/YourVendor/YourTheme/web/css .
Unzip the downloaded fontawesome zip package under fontawesome directory.

To include/call a CSS file, add the <css src="..." /> block in section in a layout file. app/design/frontend/YourVendor/YourTheme/Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/all.css" rel="stylesheet" type="text/css" />
        <css src="css/fontawsome.css" rel="stylesheet" type="text/css" />
    </head>
</page>

Deploy your static resources (Theme changes):

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Now check your css file will be added on your website.

Related Solutions

Magento 2 – Font Awesome Icons Not Rendering in Top Links

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

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

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

Best Answer

Related Solutions

Magento 2 – Font Awesome Icons Not Rendering in Top Links

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

How to add the fontawsome CSS classes

Related Topic