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 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 integrate font-awesome icon into magento2.

  • 1
    if you are including css file you don't need less, scss file, css file is enough. Let me know if you want to know how to include font-awesome.css file through xml. – Arun Karnawat Sep 14 '16 at 5:27
  • 1
    please wait I will update my stuff in that question. I know how to include in xml. – Bilal Usean Sep 14 '16 at 5:32
  • yes you right it worked. no need less and scss. thanks @ArunKarnawat – Bilal Usean Sep 14 '16 at 5:45

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">
    <css src="css/font-awesome.min.css" />
  1. we can call in phtml like <i class="fa fa-binoculars"></i>
  • This worked great! Curious.. What if any performance consequences are there from using a library like this? – JustinP Jan 16 at 19:54

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.