Magento 2.0.8 Font Awesome Icon – Without CDN

fontsmagento2.0.8

I am looking to integrate font awesome icon into magento2. I have downloaded font-awesome version 4.6.3. The tree structure of the font-awesome folder is shown below.

folder structure

I referred to this link and got some idea about where to place fonts and CSS but I don't know where to place the remaining folder less and SCSS.

can anyone explain the step-by-step process of integrating font-awesome icons into Magento 2?

Best Answer

Steps to Integrate font awesome

  1. Download font-awesome library from this link
  2. place the font files in <custom-theme-directory>/web/fonts
  3. place the css files in <custom-theme-directory>/web/css
  4. Declare font awesome css in needed layout file

eg: Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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/font-awesome.min.css" />
    </head>
</page>
  1. we can call in phtml like <i class="fa fa-binoculars"></i>
Related Topic