Responsive custom social icon

[le-hoang-ha-my]

Have you checked that your feature request isn't already filed?

• I read through FAQ and searched through the past issues, none of which addressed my feature request.
• Yes, I have checked that this feature request isn't already filed.

Description & Motivation

Currently, the custom social icon only supports png, jpg, and svg. I'm trying to use an icon not defined in Academicons or Font Awesome, and created my own ttf/woff file. It would be nice to support custom icons responsive to light/dark theme and hover effects like the existing icons, given the user's own ttf/woff file.

Pitch

No response

Alternatives

No response

Additional context

No response

[george-gca]

This has to be done manually, since it involves a lot of changes that I can't see how to make it automated. You can check how it was done for example when we added Tabler icons to our repository. But let me walk you through the steps.

1. Supposing your font have scss files, create a directory for your fonts scss files under _sass/YOUR_FONT/, like done with Tabler icons in _sass/tabler-icons/
2. Also add your font files to our repo. They'll be located somewhere under assets/, like assets/fonts/
3. You'll have to import them in assets/css/main.scss, where we import all our scss

al-folio/assets/css/main.scss

Lines 22 to 24 in cc0cb3c

	"tabler-icons/tabler-icons.scss",
	"tabler-icons/tabler-icons-filled.scss",
	"tabler-icons/tabler-icons-outline.scss"

4. Maybe you'll have to set a path to where to load the fonts from. Both Tabler icons and Fontawesome have such a variable, but Academicons not. For example, for Tabler icons by default is

al-folio/_sass/tabler-icons/tabler-icons.scss

Line 7 in cc0cb3c

$ti-font-path: './fonts' !default;

But we set it to

al-folio/_sass/_variables.scss

Lines 43 to 44 in cc0cb3c

	// Tabler icons location
	$ti-font-path: "../fonts";

[le-hoang-ha-my]

4. the fonts from. Both Tabler icons and Fontawesome have such a variable, but Academicons not. For example, for Ta

I created my own font file instead of pulling from an external source like Fontawesome, can it be in ttf file format or does it have to be scss?

Edit: Hold on actually I saw the icon I wanted to use among the Tabler icons. Would you mind guiding me through how to use those Tabler icons for social media icons?

[george-gca]

We currently only use Tabler icons in one place, the light/dark theme switch. We do it like this:

al-folio/_includes/header.liquid

Line 132 in ec7d7c3

<i class="ti ti-sun-moon" id="light-toggle-system"></i>

Just use a line similar to this referrent to the icon of your choice.