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.
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
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
add a comment |
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.
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
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
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
add a comment |
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.
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
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
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.
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
fonts magento2.0.8
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
edited Aug 18 '17 at 7:18
Teja Bhagavan Kollepara
2,94841847
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,48923385
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
asked Sep 14 '16 at 5:05
Bilal UseanBilal Usean
4,48923385
4,48923385
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
add a comment |
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
add a comment |
1 Answer
1
active
oldest
votes
10
Steps to Integrate font awesome
- Download font-awesome library from this link
- place the font files in
<custom-theme-directory>/web/fonts
- place the css files in
<custom-theme-directory>/web/css
- 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>
- we can call in phtml like
<i class="fa fa-binoculars"></i>
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
- Download font-awesome library from this link
- place the font files in
<custom-theme-directory>/web/fonts
- place the css files in
<custom-theme-directory>/web/css
- 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>
- we can call in phtml like
<i class="fa fa-binoculars"></i>
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
add a comment |
10
Steps to Integrate font awesome
- Download font-awesome library from this link
- place the font files in
<custom-theme-directory>/web/fonts
- place the css files in
<custom-theme-directory>/web/css
- 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>
- we can call in phtml like
<i class="fa fa-binoculars"></i>
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
add a comment |
10
10
10
Steps to Integrate font awesome
- Download font-awesome library from this link
- place the font files in
<custom-theme-directory>/web/fonts
- place the css files in
<custom-theme-directory>/web/css
- 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>
- we can call in phtml like
<i class="fa fa-binoculars"></i>
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
Steps to Integrate font awesome
- Download font-awesome library from this link
- place the font files in
<custom-theme-directory>/web/fonts
- place the css files in
<custom-theme-directory>/web/css
- 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>
- we can call in phtml like
<i class="fa fa-binoculars"></i>
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
edited 27 mins ago
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
answered Sep 14 '16 at 5:53
Bilal UseanBilal Usean
4,48923385
4,48923385
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
add a comment |
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
This worked great! Curious.. What if any performance consequences are there from using a library like this?
– JustinP
12 hours ago
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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