7

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?

3
  • 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. Sep 14, 2016 at 5:27
  • 1
    please wait I will update my stuff in that question. I know how to include in xml. Sep 14, 2016 at 5:32
  • yes you right it worked. no need less and scss. thanks @ArunKarnawat Sep 14, 2016 at 5:45

1 Answer 1

11

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>
2
  • This worked great! Curious.. What if any performance consequences are there from using a library like this?
    – JustinP
    Jan 16, 2019 at 19:54
  • I think the font path should be corrected to <custom-theme-directory>/web/webfonts Sep 1, 2020 at 1:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.