Skip to content

Fixed scss files to show icons correctly #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
haanjack merged 1 commit into from
Nov 3, 2025
Merged

Fixed scss files to show icons correctly #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions _sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

/*******************************************************************************
* Styles for the base elements of the theme.
******************************************************************************/
Expand Down Expand Up @@ -1418,4 +1416,4 @@ figure.cover {
a.cover-link:hover {
color: #23212d !important;
}
}
}
4 changes: 0 additions & 4 deletions _sass/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
@use 'variables' as *;

$max-content-width: 800px !default; // a default value

/******************************************************************************
* Content
******************************************************************************/
Expand Down
6 changes: 2 additions & 4 deletions _sass/_themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

/*******************************************************************************
* Themes
******************************************************************************/
Expand All @@ -11,9 +9,9 @@
--global-bg-color: #{$white-color};
--global-code-bg-color: #{$code-bg-color-light};
--global-text-color: #{$black-color};
--global-hover-color: #{$purple-color};
--global-text-color-light: #{$grey-color};
--global-theme-color: #{$purple-color};
--global-hover-color: #{$purple-color};
--global-hover-text-color: #{$white-color};
--global-footer-bg-color: #{$grey-color-dark};
--global-footer-text-color: #{$grey-color-light};
Expand Down Expand Up @@ -160,4 +158,4 @@ html[data-theme-setting="light"] {
padding-top: 12px;
display: block;
}
}
}
2 changes: 1 addition & 1 deletion _sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,4 @@ $back-to-top-bottom: 30px;
$back-to-top-right: 30px;
$back-to-top-diameter: 40px;
$back-to-top-height: $back-to-top-diameter;
$back-to-top-width: $back-to-top-diameter;
$back-to-top-width: $back-to-top-diameter;
4 changes: 1 addition & 3 deletions _sass/font-awesome/_animated.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

// animating icons
// --------------------------

Expand Down Expand Up @@ -151,4 +149,4 @@
@keyframes #{$fa-css-prefix}-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
}
4 changes: 1 addition & 3 deletions _sass/font-awesome/_bordered-pulled.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

// bordered + pulled icons
// -------------------------

Expand All @@ -19,4 +17,4 @@
.#{$fa-css-prefix}-pull-right {
float: right;
margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin});
}
}
5 changes: 1 addition & 4 deletions _sass/font-awesome/_core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@use 'variables' as *;
@use 'mixins' as *;

// base icon class definition
// -------------------------

Expand Down Expand Up @@ -49,4 +46,4 @@

%fa-icon {
@include fa-icon;
}
}
4 changes: 1 addition & 3 deletions _sass/font-awesome/_fixed-width.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
@use 'variables' as *;

// fixed-width icons
// -------------------------

.#{$fa-css-prefix}-fw {
text-align: center;
width: $fa-fw-width;
}
}
10 changes: 4 additions & 6 deletions _sass/font-awesome/_icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@use 'variables' as *;
@use "sass:string";

// specific icon class definition
// -------------------------

Expand All @@ -9,7 +6,8 @@ readers do not read off random characters that represent icons */

@each $name, $icon in $fa-icons {
.#{$fa-css-prefix}-#{$name} {
#{$fa-icon-property}: string.unquote("#{ $icon }");
#{$fa-duotone-icon-property}: string.unquote("#{#{$icon}#{$icon}}");
#{$fa-icon-property}: unquote("\"#{ $icon }\"");
#{$fa-duotone-icon-property}: unquote("\"#{$icon}#{$icon}\"");
Comment on lines +9 to +10
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

The use of unquote() here will produce an invalid value for the CSS custom properties. For the content property to correctly render the icon, the custom property's value must be a string literal containing the unicode escape sequence. The current implementation generates an unquoted value, which will break icon rendering.

Suggested change
#{$fa-icon-property}: unquote("\"#{ $icon }\"");
#{$fa-duotone-icon-property}: unquote("\"#{$icon}#{$icon}\"");
#{$fa-icon-property}: "#{$icon}";
#{$fa-duotone-icon-property}: "#{$icon}#{$icon}";

}
}
}

4 changes: 1 addition & 3 deletions _sass/font-awesome/_list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

// icons in a list
// -------------------------

Expand All @@ -17,4 +15,4 @@
text-align: center;
width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
line-height: inherit;
}
}
12 changes: 4 additions & 8 deletions _sass/font-awesome/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
@use 'variables' as *;
@use 'functions' as *;
@use "sass:string";

// mixins
// --------------------------

Expand Down Expand Up @@ -55,15 +51,15 @@
@mixin fa-icon-solid($fa-var) {
@extend .fa-solid;

& { #{$fa-icon-property}: string.unquote("#{ $fa-var }"); #{$fa-duotone-icon-property}: string.unquote("#{ $fa-var }#{ $fa-var }"); }
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
}
@mixin fa-icon-regular($fa-var) {
@extend .fa-regular;

& { #{$fa-icon-property}: string.unquote("#{ $fa-var }"); #{$fa-duotone-icon-property}: string.unquote("#{ $fa-var }#{ $fa-var }"); }
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
}
@mixin fa-icon-brands($fa-var) {
@extend .fa-brands;

& { #{$fa-icon-property}: string.unquote("#{ $fa-var }"); #{$fa-duotone-icon-property}: string.unquote("#{ $fa-var }#{ $fa-var }"); }
}
& { #{$fa-icon-property}: unquote("\"#{ $fa-var }\""); #{$fa-duotone-icon-property}: unquote("\"#{ $fa-var }#{ $fa-var }\""); }
}
4 changes: 1 addition & 3 deletions _sass/font-awesome/_rotated-flipped.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

// rotating + flipping icons
// -------------------------

Expand Down Expand Up @@ -30,4 +28,4 @@

.#{$fa-css-prefix}-rotate-by {
transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, 0));
}
}
3 changes: 0 additions & 3 deletions _sass/font-awesome/_screen-reader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@use 'variables' as *;
@use 'mixins' as *;

// screen-reader utilities
// -------------------------

Expand Down
5 changes: 1 addition & 4 deletions _sass/font-awesome/_sizing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
@use 'variables' as *;
@use 'mixins' as *;

// sizing icons
// -------------------------

Expand All @@ -16,4 +13,4 @@
.#{$fa-css-prefix}-#{$size} {
@include fa-size($value);
}
}
}
4 changes: 1 addition & 3 deletions _sass/font-awesome/_stacked.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'variables' as *;

// stacking icons
// -------------------------

Expand Down Expand Up @@ -31,4 +29,4 @@

.#{$fa-css-prefix}-inverse {
color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
}
}
2 changes: 0 additions & 2 deletions _sass/font-awesome/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@use 'functions' as *;

// variables
// --------------------------

Expand Down
9 changes: 4 additions & 5 deletions _sass/font-awesome/brands.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@use 'functions' as *;
@use 'variables' as *;
@use "sass:string";
@import 'functions';
@import 'variables';

:root, :host {
--#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
Expand All @@ -27,5 +26,5 @@
}

@each $name, $icon in $fa-brand-icons {
.#{$fa-css-prefix}-#{$name} { #{$fa-icon-property}: string.unquote("#{ $icon }"); }
}
.#{$fa-css-prefix}-#{$name} { #{$fa-icon-property}: unquote("\"#{ $icon }\""); }
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

The use of unquote() here will produce an invalid value for the CSS custom property. For the icon to render correctly, the value assigned to the custom property must be a string literal containing the unicode escape sequence.

Suggested change
.#{$fa-css-prefix}-#{$name} { #{$fa-icon-property}: unquote("\"#{ $icon }\""); }
.#{$fa-css-prefix}-#{$name} { #{$fa-icon-property}: "#{$icon}"; }

}
26 changes: 13 additions & 13 deletions _sass/font-awesome/fontawesome.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
// Font Awesome core compile (Web Fonts-based)
// -------------------------

@forward 'functions';
@forward 'variables';
@forward 'mixins';
@forward 'core';
@forward 'sizing';
@forward 'fixed-width';
@forward 'list';
@forward 'bordered-pulled';
@forward 'animated';
@forward 'rotated-flipped';
@forward 'stacked';
@forward 'icons';
@forward 'screen-reader';
@import 'functions';
@import 'variables';
@import 'mixins';
@import 'core';
@import 'sizing';
@import 'fixed-width';
@import 'list';
@import 'bordered-pulled';
@import 'animated';
@import 'rotated-flipped';
@import 'stacked';
@import 'icons';
@import 'screen-reader';
4 changes: 2 additions & 2 deletions _sass/font-awesome/regular.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@use 'functions' as *;
@use 'variables' as *;
@import 'functions';
@import 'variables';

:root, :host {
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
Expand Down
4 changes: 2 additions & 2 deletions _sass/font-awesome/solid.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
@use 'functions' as *;
@use 'variables' as *;
@import 'functions';
@import 'variables';

:root, :host {
--#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
Expand Down
4 changes: 2 additions & 2 deletions _sass/font-awesome/v4-shims.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
// V4 shims compile (Web Fonts-based)
// -------------------------

@use 'functions' as *;
@use 'variables' as *;
@import 'functions';
@import 'variables';
@import 'shims';
4 changes: 2 additions & 2 deletions _sass/tabler-icons/tabler-icons-filled.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "sass:string";
@charset "UTF-8";
/*!
* Tabler Icons 3.20.0 by tabler - https://tabler.io
Expand Down Expand Up @@ -34,7 +33,7 @@ $ti-prefix: 'ti' !default;
}

@function unicode($str) {
@return string.unquote("\"")+string.unquote(string.insert($str, "\\", 1))+string.unquote("\"")
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}


Expand Down Expand Up @@ -1644,3 +1643,4 @@ $ti-icon-zoom-scan: unicode('fdbf');
// Aliases
.#{$ti-prefix}-discount-check:before { content: $ti-icon-rosette-discount-check; }
.#{$ti-prefix}-message-circle-2:before { content: $ti-icon-message-circle; }

4 changes: 2 additions & 2 deletions _sass/tabler-icons/tabler-icons-outline.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
@use "sass:string";
@charset "UTF-8";
/*!
* Tabler Icons 3.20.0 by tabler - https://tabler.io
Expand Down Expand Up @@ -34,7 +33,7 @@ $ti-prefix: 'ti' !default;
}

@function unicode($str) {
@return string.unquote("\"")+string.unquote(string.insert($str, "\\", 1))+string.unquote("\"")
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}


Expand Down Expand Up @@ -9857,3 +9856,4 @@ $ti-icon-zzz-off: unicode('f440');
.#{$ti-prefix}-message-circle-2:before { content: $ti-icon-message-circle; }
.#{$ti-prefix}-mood-suprised:before { content: $ti-icon-mood-surprised; }
.#{$ti-prefix}-circle-dashed-letter-letter-v:before { content: $ti-icon-circle-dashed-letter-v; }

3 changes: 1 addition & 2 deletions _sass/tabler-icons/tabler-icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@charset "UTF-8";
@use "sass:string";
/*!
* Tabler Icons 3.20.0 by tabler - https://tabler.io
* License - https://github.com/tabler/tabler-icons/blob/master/LICENSE
Expand Down Expand Up @@ -34,7 +33,7 @@ $ti-prefix: 'ti' !default;
}

@function unicode($str) {
@return string.unquote("\"")+string.unquote(string.insert($str, "\\", 1))+string.unquote("\"")
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}


Expand Down
34 changes: 17 additions & 17 deletions assets/css/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@
// Dimensions
$max-content-width: {{ site.max_width }};

@use "variables" as *;
@use "themes" as *;
@use "layout" with (
$max-content-width: $max-content-width
);
@use "base";
@use "distill";
@use "cv";
@use "tabs";
@use "typograms";
@use "font-awesome/fontawesome";
@use "font-awesome/brands";
@use "font-awesome/solid";
@use "font-awesome/regular";
@use "tabler-icons/tabler-icons";
@use "tabler-icons/tabler-icons-filled";
@use "tabler-icons/tabler-icons-outline";
@import
"variables",
"themes",
"layout",
"base",
"distill",
"cv",
"tabs",
"typograms",
"font-awesome/fontawesome",
"font-awesome/brands",
"font-awesome/solid",
"font-awesome/regular",
"tabler-icons/tabler-icons.scss",
"tabler-icons/tabler-icons-filled.scss",
"tabler-icons/tabler-icons-outline.scss"
;
Comment on lines +9 to +25
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Nov 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

While migrating from @use to @import might be necessary for your build environment, it's worth noting that @import is being deprecated in Sass. For better maintainability and to avoid global scope pollution, consider using the modern module system with @use and @forward if your build tools support it in the future. This change to a single @import statement is a good way to manage dependencies with the older system.

Loading