font awesome icon without cdn - magento 2.0.8












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 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.










share|improve this question




















  • 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


















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 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.










share|improve this question




















  • 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
















7












7








7


3






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.










share|improve this question
















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.







fonts magento2.0.8






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Aug 18 '17 at 7:18









Teja Bhagavan Kollepara

2,94841847




2,94841847










asked Sep 14 '16 at 5:05









Bilal UseanBilal Usean

4,49923485




4,49923485








  • 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
















  • 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










1




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







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




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







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







yes you right it worked. no need less and scss. thanks @ArunKarnawat

– Bilal Usean
Sep 14 '16 at 5:45












1 Answer
1






active

oldest

votes


















10














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>






share|improve this answer


























  • 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








StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f136182%2ffont-awesome-icon-without-cdn-magento-2-0-8%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









10














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>






share|improve this answer


























  • This worked great! Curious.. What if any performance consequences are there from using a library like this?

    – JustinP
    Jan 16 at 19:54
















10














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>






share|improve this answer


























  • This worked great! Curious.. What if any performance consequences are there from using a library like this?

    – JustinP
    Jan 16 at 19:54














10












10








10







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>






share|improve this 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>







share|improve this answer














share|improve this answer



share|improve this answer








edited Jan 17 at 7:30

























answered Sep 14 '16 at 5:53









Bilal UseanBilal Usean

4,49923485




4,49923485













  • This worked great! Curious.. What if any performance consequences are there from using a library like this?

    – JustinP
    Jan 16 at 19:54



















  • This worked great! Curious.. What if any performance consequences are there from using a library like this?

    – JustinP
    Jan 16 at 19:54

















This worked great! Curious.. What if any performance consequences are there from using a library like this?

– JustinP
Jan 16 at 19:54





This worked great! Curious.. What if any performance consequences are there from using a library like this?

– JustinP
Jan 16 at 19:54


















draft saved

draft discarded




















































Thanks for contributing an answer to Magento Stack Exchange!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f136182%2ffont-awesome-icon-without-cdn-magento-2-0-8%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

1300-talet

1300-talet

Display a custom attribute below product name in the front-end Magento 1.9.3.8