Bug description
In the SCSS Docs, the icon() mixin in the individual style partials is documented to have no parameters. However, this is wrong, and even the examples above show that fa-X.icon() is meant to set up a specific icon:
// Thin style of paintbrush-fine
.paintbrush-fine {
@include fa-thin.icon(fa.$var-paintbrush-fine);
}
There seems to be no mixin and/or function for setting up the individual style, without assigning an icon to ::before. In my use case, I was hoping to use such a set up to attach FA icons to ::before and ::after or a paragraph, like so:
%fa-before-after-icon {
&:before, &:after {
@extend fa-solid.setup-icon(); // Theoretical mixin
}
}
and only assign an icon later, like so:
.disclaimer {
font-weight: bold;
&.warning {
@extend %fa-before-after-icon;
&:before, &:after {
content: fa.fa-content(fa.$var-triangle-exclamation);
color: DarkOrange;
}
}
&.info {
@extend %fa-before-after-icon;
&:before, &:after {
content: fa.fa-content(fa.$var-circle-info);
}
}
}
In FA6, I was able to achieve this by extending %fa-icon and then using fa-content to assign the icon to arbitrary pseudo-elements. However, FA7 seems to lack a mixin for that. so I may have to re-implement a part of the icon() mixin:
@include fa.fa-icon(Font Awesome 7 Free);
@extend .fa-solid;
@extend .fa-classic;
Reproducible test case
See above for an example from the docs.
Screenshots
No response
Font Awesome version
v7.2.0
Serving
Self-hosted
Implementation
Other (as specified in the bug description)
Browser and Operating System
Web bug report checklist
Bug description
In the SCSS Docs, the
icon()mixin in the individual style partials is documented to have no parameters. However, this is wrong, and even the examples above show thatfa-X.icon()is meant to set up a specific icon:There seems to be no mixin and/or function for setting up the individual style, without assigning an icon to
::before. In my use case, I was hoping to use such a set up to attach FA icons to::beforeand::afteror a paragraph, like so:and only assign an icon later, like so:
In FA6, I was able to achieve this by extending
%fa-iconand then usingfa-contentto assign the icon to arbitrary pseudo-elements. However, FA7 seems to lack a mixin for that. so I may have to re-implement a part of theicon()mixin:Reproducible test case
See above for an example from the docs.
Screenshots
No response
Font Awesome version
v7.2.0
Serving
Self-hosted
Implementation
Other (as specified in the bug description)
Browser and Operating System
Web bug report checklist