Magento – Magento 2 – How to use font awesome icons using cdn url

cdnmagento2

I'm new to Magento 2.

I would like to know how to use font awesome icons in my magento 2 project particularly in linking the cdn url to my project where about would I add this link?

Thanks

Best Answer

You have to use absolute url instead of relative url to import font in css file like :

../font/fontfilename => http://www.yourdomain/skin/frontend/namespace/theme/font/fontfilename

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