I have been developing a SASS mixin that allows for the input of various variables to construct a font-awesome declaration in the following format:
@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
&:after {
content:$unicode;
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
The usage would look like this:
@include after-font-awesome('\f078', 15px, 0 0 0 0.3em, orange, 900) {}
To simplify the input process, I attempted to pass in only the unicode numbers, such as f078, and have it automatically formatted as '\f078' within the mixin. After exploring some documentation, I tried the following approaches:
@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
&:after {
content:'\#{$unicode}';
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
or
@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
&:after {
content:'\{$unicode}';
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
or
@mixin after-font-awesome($unicode, $size, $margin, $color, $weight) {
&:after {
content:'\$unicode';
font-family:"FontAwesome";
font-size:$size;
color:$color;
font-weight:$weight;
margin:$margin;
@content;
}
}
Unfortunately, none of these approaches worked. I would appreciate any guidance or assistance in resolving this issue. Thank you.