Mixing
Font awesome content in sass using Angular component styles
I use sass for styling in my Angular 6 project, and I now want to be able to use component-specific styling by using styleUrls: ['./filename.scss'] in the Component declaration, instead of only having global sass-files.
So I followed these instructions to get this working in webpack, which works fine except for one thing: font awesome in the CSS content-property. Basically, I have a component with the following SCSS:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
.myelement {
&:after {
@include fa-icon;
@extend .fas;
content: fa-content($fa-var-angle-down);
}
}
My Webpack looks like this:
module: {
rules: [
{
test: /.scss$/,
exclude: /node_modules/,
use: ['raw-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
...
]
}
This compiles fine with webpack, but I get errors in the browser consoles and the icons are replaced with squares.
In Firefox I get the following error:
downloadable font: rejected by sanitizer
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1)
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
And in Chrome I get:
Failed to decode downloaded font:
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
How can I include fonts in my component-specific sass-files?
angular webpack sass font-awesome
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
asked Nov 19 '18 at 16:48
ShamPooSham
510416
|
show 7 more comments
I use sass for styling in my Angular 6 project, and I now want to be able to use component-specific styling by using styleUrls: ['./filename.scss'] in the Component declaration, instead of only having global sass-files.
So I followed these instructions to get this working in webpack, which works fine except for one thing: font awesome in the CSS content-property. Basically, I have a component with the following SCSS:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
.myelement {
&:after {
@include fa-icon;
@extend .fas;
content: fa-content($fa-var-angle-down);
}
}
My Webpack looks like this:
module: {
rules: [
{
test: /.scss$/,
exclude: /node_modules/,
use: ['raw-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
...
]
}
This compiles fine with webpack, but I get errors in the browser consoles and the icons are replaced with squares.
In Firefox I get the following error:
downloadable font: rejected by sanitizer
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1)
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
And in Chrome I get:
Failed to decode downloaded font:
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
How can I include fonts in my component-specific sass-files?
angular webpack sass font-awesome
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
asked Nov 19 '18 at 16:48
ShamPooSham
510416
does the fonts have parameters? if so remove it like this stackoverflow.com/questions/37429519/…
– Lucho
Nov 19 '18 at 22:14
@Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can seefont-family: 'Font Awesome 5 Free';,content: "f105";along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling.
– ShamPooSham
Nov 20 '18 at 9:32
@Luncho I forgot to add to the question that I had set$fa-font-pathin an included file, so I updated my question to reflect that.
– ShamPooSham
Nov 20 '18 at 20:07
I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file.
– Bunyamin Coskuner
Nov 22 '18 at 8:06
1
@Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now
– ShamPooSham
Nov 29 '18 at 10:02
|
show 7 more comments
I use sass for styling in my Angular 6 project, and I now want to be able to use component-specific styling by using styleUrls: ['./filename.scss'] in the Component declaration, instead of only having global sass-files.
So I followed these instructions to get this working in webpack, which works fine except for one thing: font awesome in the CSS content-property. Basically, I have a component with the following SCSS:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
.myelement {
&:after {
@include fa-icon;
@extend .fas;
content: fa-content($fa-var-angle-down);
}
}
My Webpack looks like this:
module: {
rules: [
{
test: /.scss$/,
exclude: /node_modules/,
use: ['raw-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
...
]
}
This compiles fine with webpack, but I get errors in the browser consoles and the icons are replaced with squares.
In Firefox I get the following error:
downloadable font: rejected by sanitizer
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1)
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
And in Chrome I get:
Failed to decode downloaded font:
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
How can I include fonts in my component-specific sass-files?
angular webpack sass font-awesome
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
asked Nov 19 '18 at 16:48
ShamPooSham
510416
I use sass for styling in my Angular 6 project, and I now want to be able to use component-specific styling by using styleUrls: ['./filename.scss'] in the Component declaration, instead of only having global sass-files.
So I followed these instructions to get this working in webpack, which works fine except for one thing: font awesome in the CSS content-property. Basically, I have a component with the following SCSS:
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
.myelement {
&:after {
@include fa-icon;
@extend .fas;
content: fa-content($fa-var-angle-down);
}
}
My Webpack looks like this:
module: {
rules: [
{
test: /.scss$/,
exclude: /node_modules/,
use: ['raw-loader', 'sass-loader']
},
{
test: /.(woff(2)?|ttf|eot|svg)(?v=d+.d+.d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts'
}
}]
},
...
]
}
This compiles fine with webpack, but I get errors in the browser consoles and the icons are replaced with squares.
In Firefox I get the following error:
downloadable font: rejected by sanitizer
(font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1)
source: https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
And in Chrome I get:
Failed to decode downloaded font:
https://localhost:8965/~@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2
How can I include fonts in my component-specific sass-files?
angular webpack sass font-awesome
angular webpack sass font-awesome
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
asked Nov 19 '18 at 16:48
ShamPooSham
510416
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
asked Nov 19 '18 at 16:48
ShamPooSham
510416
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
edited Nov 20 '18 at 19:06
Federico Grandi
2,70021127
2,70021127
asked Nov 19 '18 at 16:48
ShamPooSham
510416
asked Nov 19 '18 at 16:48
ShamPooSham
510416
asked Nov 19 '18 at 16:48
ShamPooSham
510416
510416
does the fonts have parameters? if so remove it like this stackoverflow.com/questions/37429519/…
– Lucho
Nov 19 '18 at 22:14
@Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can seefont-family: 'Font Awesome 5 Free';,content: "f105";along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling.
– ShamPooSham
Nov 20 '18 at 9:32
@Luncho I forgot to add to the question that I had set$fa-font-pathin an included file, so I updated my question to reflect that.
– ShamPooSham
Nov 20 '18 at 20:07
I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file.
– Bunyamin Coskuner
Nov 22 '18 at 8:06
1
@Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now
– ShamPooSham
Nov 29 '18 at 10:02
|
show 7 more comments
does the fonts have parameters? if so remove it like this stackoverflow.com/questions/37429519/…
– Lucho
Nov 19 '18 at 22:14
@Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can seefont-family: 'Font Awesome 5 Free';,content: "f105";along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling.
– ShamPooSham
Nov 20 '18 at 9:32
@Luncho I forgot to add to the question that I had set$fa-font-pathin an included file, so I updated my question to reflect that.
– ShamPooSham
Nov 20 '18 at 20:07
I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file.
– Bunyamin Coskuner
Nov 22 '18 at 8:06
1
@Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now
– ShamPooSham
Nov 29 '18 at 10:02
does the fonts have parameters? if so remove it like this stackoverflow.com/questions/37429519/…
– Lucho
Nov 19 '18 at 22:14
does the fonts have parameters? if so remove it like this stackoverflow.com/questions/37429519/…
– Lucho
Nov 19 '18 at 22:14
@Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can see
font-family: 'Font Awesome 5 Free';, content: "f105"; along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling.– ShamPooSham
Nov 20 '18 at 9:32
@Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can see
font-family: 'Font Awesome 5 Free';, content: "f105"; along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling.– ShamPooSham
Nov 20 '18 at 9:32
@Luncho I forgot to add to the question that I had set
$fa-font-path in an included file, so I updated my question to reflect that.– ShamPooSham
Nov 20 '18 at 20:07
@Luncho I forgot to add to the question that I had set
$fa-font-path in an included file, so I updated my question to reflect that.– ShamPooSham
Nov 20 '18 at 20:07
I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file.
– Bunyamin Coskuner
Nov 22 '18 at 8:06
I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file.
– Bunyamin Coskuner
Nov 22 '18 at 8:06
1
1
@Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now
– ShamPooSham
Nov 29 '18 at 10:02
@Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now
– ShamPooSham
Nov 29 '18 at 10:02
|
show 7 more comments
3 Answers
3
active
oldest
votes
Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/
answered Nov 29 '18 at 9:00
ShamPooSham
510416
add a comment |
Have you tried import this
@import '~@fortawesome/fontawesome-free/css/all.css';
and remove
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
Hope this works!
answered Nov 22 '18 at 9:17
freepowder
2796
Thanks for the suggestion. Sadly, this doesn't work. First of,all.cssdoesn't include scss mixins, variables and functions such asfa-icon,$fa-var-angle-downandfa-content, so I have to change tocontent: 'f105'etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.
– ShamPooSham
Nov 22 '18 at 13:11
add a comment |
you can use this one.
https://www.npmjs.com/package/angular2-fontawesome
you can include this one in your styles.scss file or in your angular.json file
"../../node_modules/font-awesome/css/font-awesome.css"
this module has it's own component for fontawsome but you can use it like this too.
<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>
both works
answered Nov 24 '18 at 6:41
molikh
719519
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using:afterand:beforepseudo-selectors instead of creating new HTML elements.
– ShamPooSham
Nov 26 '18 at 15:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
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: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
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%2fstackoverflow.com%2fquestions%2f53379232%2ffont-awesome-content-in-sass-using-angular-component-styles%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/
answered Nov 29 '18 at 9:00
ShamPooSham
510416
add a comment |
Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/
answered Nov 29 '18 at 9:00
ShamPooSham
510416
add a comment |
Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/
answered Nov 29 '18 at 9:00
ShamPooSham
510416
Although not optimal, I solved this by moving completely to Angular CLI and ditching the manual webpack config. I hoped I could then do ng eject and get the resulting webpack config, but it appears as if the Angular devs have disabled it :/
answered Nov 29 '18 at 9:00
ShamPooSham
510416
answered Nov 29 '18 at 9:00
ShamPooSham
510416
answered Nov 29 '18 at 9:00
ShamPooSham
510416
answered Nov 29 '18 at 9:00
ShamPooSham
510416
510416
add a comment |
add a comment |
Have you tried import this
@import '~@fortawesome/fontawesome-free/css/all.css';
and remove
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
Hope this works!
answered Nov 22 '18 at 9:17
freepowder
2796
Thanks for the suggestion. Sadly, this doesn't work. First of,all.cssdoesn't include scss mixins, variables and functions such asfa-icon,$fa-var-angle-downandfa-content, so I have to change tocontent: 'f105'etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.
– ShamPooSham
Nov 22 '18 at 13:11
add a comment |
Have you tried import this
@import '~@fortawesome/fontawesome-free/css/all.css';
and remove
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
Hope this works!
answered Nov 22 '18 at 9:17
freepowder
2796
Thanks for the suggestion. Sadly, this doesn't work. First of,all.cssdoesn't include scss mixins, variables and functions such asfa-icon,$fa-var-angle-downandfa-content, so I have to change tocontent: 'f105'etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.
– ShamPooSham
Nov 22 '18 at 13:11
add a comment |
Have you tried import this
@import '~@fortawesome/fontawesome-free/css/all.css';
and remove
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
Hope this works!
answered Nov 22 '18 at 9:17
freepowder
2796
Have you tried import this
@import '~@fortawesome/fontawesome-free/css/all.css';
and remove
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/fa-solid.scss";
Hope this works!
answered Nov 22 '18 at 9:17
freepowder
2796
answered Nov 22 '18 at 9:17
freepowder
2796
answered Nov 22 '18 at 9:17
freepowder
2796
answered Nov 22 '18 at 9:17
freepowder
2796
2796
Thanks for the suggestion. Sadly, this doesn't work. First of,all.cssdoesn't include scss mixins, variables and functions such asfa-icon,$fa-var-angle-downandfa-content, so I have to change tocontent: 'f105'etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.
– ShamPooSham
Nov 22 '18 at 13:11
add a comment |
Thanks for the suggestion. Sadly, this doesn't work. First of,all.cssdoesn't include scss mixins, variables and functions such asfa-icon,$fa-var-angle-downandfa-content, so I have to change tocontent: 'f105'etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.
– ShamPooSham
Nov 22 '18 at 13:11
Thanks for the suggestion. Sadly, this doesn't work. First of,
all.css doesn't include scss mixins, variables and functions such as fa-icon, $fa-var-angle-down and fa-content, so I have to change to content: 'f105' etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.– ShamPooSham
Nov 22 '18 at 13:11
Thanks for the suggestion. Sadly, this doesn't work. First of,
all.css doesn't include scss mixins, variables and functions such as fa-icon, $fa-var-angle-down and fa-content, so I have to change to content: 'f105' etc. But even if I do that, I still don't get the fonts. I don't think all.css includes the fonts, it just defines css classes that can be used in the html code and sets the content to the correct unicode.– ShamPooSham
Nov 22 '18 at 13:11
add a comment |
you can use this one.
https://www.npmjs.com/package/angular2-fontawesome
you can include this one in your styles.scss file or in your angular.json file
"../../node_modules/font-awesome/css/font-awesome.css"
this module has it's own component for fontawsome but you can use it like this too.
<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>
both works
answered Nov 24 '18 at 6:41
molikh
719519
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using:afterand:beforepseudo-selectors instead of creating new HTML elements.
– ShamPooSham
Nov 26 '18 at 15:36
add a comment |
you can use this one.
https://www.npmjs.com/package/angular2-fontawesome
you can include this one in your styles.scss file or in your angular.json file
"../../node_modules/font-awesome/css/font-awesome.css"
this module has it's own component for fontawsome but you can use it like this too.
<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>
both works
answered Nov 24 '18 at 6:41
molikh
719519
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using:afterand:beforepseudo-selectors instead of creating new HTML elements.
– ShamPooSham
Nov 26 '18 at 15:36
add a comment |
you can use this one.
https://www.npmjs.com/package/angular2-fontawesome
you can include this one in your styles.scss file or in your angular.json file
"../../node_modules/font-awesome/css/font-awesome.css"
this module has it's own component for fontawsome but you can use it like this too.
<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>
both works
answered Nov 24 '18 at 6:41
molikh
719519
you can use this one.
https://www.npmjs.com/package/angular2-fontawesome
you can include this one in your styles.scss file or in your angular.json file
"../../node_modules/font-awesome/css/font-awesome.css"
this module has it's own component for fontawsome but you can use it like this too.
<i fa [name]="'rocket'"></i>
<!-- rendered -->
<i fa class="fa fa-rocket"></i>
both works
answered Nov 24 '18 at 6:41
molikh
719519
answered Nov 24 '18 at 6:41
molikh
719519
answered Nov 24 '18 at 6:41
molikh
719519
answered Nov 24 '18 at 6:41
molikh
719519
719519
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using:afterand:beforepseudo-selectors instead of creating new HTML elements.
– ShamPooSham
Nov 26 '18 at 15:36
add a comment |
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using:afterand:beforepseudo-selectors instead of creating new HTML elements.
– ShamPooSham
Nov 26 '18 at 15:36
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using
:after and :before pseudo-selectors instead of creating new HTML elements.– ShamPooSham
Nov 26 '18 at 15:36
Yeah, I know I can use angular2-fontawesome, but I would like to use it in scss by using
:after and :before pseudo-selectors instead of creating new HTML elements.– ShamPooSham
Nov 26 '18 at 15:36
add a comment |
Thanks for contributing an answer to Stack Overflow!
- 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
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%2fstackoverflow.com%2fquestions%2f53379232%2ffont-awesome-content-in-sass-using-angular-component-styles%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');
});
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');
});
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');
});
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
does the fonts have parameters? if so remove it like this stackoverflow.com/questions/37429519/…
– Lucho
Nov 19 '18 at 22:14
@Luncho Not sure what you mean by that. Are you talking about the font or the mixins? The mixins seem to generate the correct output, since I can see
font-family: 'Font Awesome 5 Free';,content: "f105";along various other properties set by font-awesome in the browser inspector. The problem is that it can't find the font. This all worked fine before I switched to per-component styling.– ShamPooSham
Nov 20 '18 at 9:32
@Luncho I forgot to add to the question that I had set
$fa-font-pathin an included file, so I updated my question to reflect that.– ShamPooSham
Nov 20 '18 at 20:07
I don't know how to answer your question but something else caught my attention. You import font-awesome css at some components files which may bloat your styles bundle. If you use this component multiple times, you'll see in the DOM, this style is applied multiple times. I think you should revise your need and move font-awesome import to a global file.
– Bunyamin Coskuner
Nov 22 '18 at 8:06
1
@Justcode I'm sorry, I don't have a public git repo because it's a closed-source project and I'm not allowed to. Making a minimal stackblitz or new git repo for just this would take time I don't have, sadly. Anyways, I solved this by moving to ng cli. It's not optimal, but it works right now
– ShamPooSham
Nov 29 '18 at 10:02