supacons

Supacons Core

Supacons Core is the backbone of Supacons icons. Previously the icons were available as SVGs since at that time those SVGs were openly available (needed to dug deep to find them) on the Font Awesome’s website but, with the release of Font Awesome 6, they have switched to using webfonts as their primary means to showcase their icons on their website which made it impossible (for now) to extract/scrape their site for those SVGs.

Approach

Previously, we dug deep into their website tree to scrape out those SVGs which they used to showcase their icons (we used Selenium automation with Python for scrapping) on their website.

Currently, since they have switched to a font based showcase system for their website, we are downloading all the font files available on the website (anyone can download these, anytime) and create a CSS stylesheet as per their guidelines/documentation on font icons on the web using CSS pseudo-elements. We are using a the FontAwesome public API with Python and read out those icon names and their unicode equivalent and used SASS to generate those 30,000+ CSS classes for those icons.

Fields	Font Awesome	Supacons Core	Supacons
Version	6	6	6
Release Version	6.7.2	6.7.2	6.7.2

Fields	Icon Status
Total Generic Icons	3,323
Total Brand Icons	495
Total Icons	3,814
Total Icons (all combinations)	53,663

Supacons Core
- Approach
- Table of Contents
- Usage
- Styling
- Icons
  - All
  - Brands
  - Classic
    - Solid
    - Regular
    - Light
    - Thin
  - Duotone
    - Solid
    - Regular
    - Light
    - Thin
  - Sharp Duotone
    - Solid
    - Regular
    - Light
    - Thin
  - Sharp
    - Solid
    - Regular
    - Light
    - Thin
- Testing
- Todos
- MIT License

Usage

Include the stylesheets in your website using HTML <link rel="stylesheet"> tags. All stylesheets are compressed for minimal footprint (provided that, you use the minified versions in dist/ folder). Checkout Icons section to select your preferred icon.

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/supacons.all.css" />

Use the icons as you use a standard Font Awesome icons. The syntax of using Supacons icons is 100% similar to using Font Awesome icons. (i.e.; you can actually go to Font Awesome 6, pick your icon, **COPY** the <i class="fa-solid fa-abacus"></i> tag (for instance) and **PASTE** it in your HTML code)

<html>
    <head>
        <link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/supacons.all.css" />
    </head>
    <body>
        <i class="fa-solid fa-abacus"></i>
    </body>
</html>

Styling

All the icons (EXCEPT Duotone icons) can be styled by selecting the <i> tag OR selecting the icon classes OR you can specifically select the ::before pseudo element, using your own stylesheets.

/* to set globally for all icons */
i::before {
    color: red;
}
/* OR, to set globally for all solid icons */
.fa-solid::before {
    color: green;
}
/* OR, to set globally for that specific icon */
.fa-icon-name::before {
    color: blue;
}

To style duotone icons, you need to select both the ::before & ::after pseudo elements of the icon. As per the Font Awesome guidelines, there is a opacity: 0.4 property on ::after pseudo element which you might want to override, specific to your likeness.

/* to set globally for all icons */
i::before {
    color: red;
}
i::after {
    color: pink;
    opacity: 1;
}
/* OR, to set globally for all duotone icons */
.fa-duotone::before {
    color: green;
}
.fa-duotone::after {
    color: lime;
    opacity: 0.6;
}
/* OR, to set globally for that specific icon */
.fa-icon-name::before {
    color: blue;
}
.fa-icon-name::after {
    color: cyan;
    opacity: 0.2;
}

Icons

All

Contains all the 3,804 different types of icons (includes; classic versions of solid, regular, light, thin, duotone icons, brand icons & sharp versions of solid, regular, light, thin & duotone icons) of Font Awesome 6 Pro, altogether making a total of 33,612 icons.

https://poseidon-code.github.io/supacons/dist/supacons.all.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/supacons.all.css" />

Brands

Contains all the 495 brand icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/brands/supacons.brands.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/brands/supacons.brands.css" />

Classic

Solid

Contains all the 3,323 solid icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/classic/supacons.solid.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/classic/supacons.solid.css" />

Regular

Contains all the 3,323 regular icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/classic/supacons.regular.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/classic/supacons.regular.css" />

Light

Contains all the 3,323 light icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/classic/supacons.light.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/classic/supacons.light.css" />

Thin

Contains all the 3,323 thin icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/classic/supacons.thin.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/classic/supacons.thin.css" />

Duotone

Solid

Contains all the 3,323 solid icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/duotone/supacons.solid.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/duotone/supacons.solid.css" />

Regular

Contains all the 3,323 regular icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/duotone/supacons.regular.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/duotone/supacons.regular.css" />

Light

Contains all the 3,323 light icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/duotone/supacons.light.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/duotone/supacons.light.css" />

Thin

Contains all the 3,323 thin icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/duotone/supacons.thin.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/duotone/supacons.thin.css" />

Sharp Duotone

Solid

Contains all the 3,323 solid icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.solid.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.solid.css" />

Regular

Contains all the 3,323 regular icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.regular.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.regular.css" />

Light

Contains all the 3,323 light icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.light.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.light.css" />

Thin

Contains all the 3,323 thin icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.thin.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp-duotone/supacons.thin.css" />

Sharp

Solid

Contains all the 3,323 sharp solid icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp/supacons.solid.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp/supacons.solid.css" />

Regular

Contains all the 3,323 sharp regular icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp/supacons.regular.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp/supacons.regular.css" />

Light

Contains all the 3,323 sharp light icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp/supacons.light.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp/supacons.light.css" />

Thin

Contains all the 3,323 sharp thin icons of Font Awesome 6 Pro (includes Pro icons).

https://poseidon-code.github.io/supacons/dist/sharp/supacons.thin.css

<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp/supacons.thin.css" />

Testing

To test & visualise the changes made to the stylesheets inside css/ and dist/ folders, use a simple HTTP server to host this root directory (e.g.: inside this project’s root directory, use the python’s simple HTTP server to host the files).

python3 -m http.server 8000

Open a browser window and goto http://localhost:8000/test/index.html

Include and exclude stylesheets just by commenting out the lines in index.html

<!-- <link rel="stylesheet" href="../css/supacons.all.css" /> -->
<link rel="stylesheet" href="../dist/supacons.all.css" />

Requires browser refresh everytime there is a change in index.html and every file linked with it.
If the changes are not reflected after simple broswer refresh then refresh browser with Ctrl + F5 (i.e. refreshing with cleared cache)

Todos

Create Supacons 6 frontend
Add some tests for Sass
Implement autoprefixer & postcss and check/fix for compilation errors
Implement best practices for Sass with better modular design
Implement best practices for compilation & building of Sass
Maybe make a npm package for React same as that of Font Awesome

MIT License

This site is open source. Improve this page.

supacons

Supacons Core

Approach

Table of Contents

Usage

Styling

Icons

All

Brands

Classic

Solid

Regular

Light

Thin

Duotone

Solid

Regular

Light

Thin

Sharp Duotone

Solid

Regular

Light

Thin

Sharp

Solid

Regular

Light

Thin

Testing

Todos

MIT License