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?

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

1 Answer 1

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