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.
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.
NOTE
The scrapping & automation scripts made of Python with Selenium for Supacons 5 (Font Awesome 5) & Supacons 6 (Font Awesome 6) are private repositories at the moment, and may be made public in possible future.
| Fields | Font Awesome | Supacons Core | Supacons |
|---|---|---|---|
| Version | 6 | 6 | 6 |
| Release Version | 6.6.0 | 6.6.0 | 6.6.0 |
| Fields | Icon Status |
|---|---|
| Total Generic Icons | 3,312 |
| Total Brand Icons | 492 |
| Total Icons | 3,804 |
| Total Icons (all combinations) | 33,612 |
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>
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;
}
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" />
Contains all the 492 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" />
Contains all the 3,312 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" />
Contains all the 3,312 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" />
Contains all the 3,312 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" />
Contains all the 3,312 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" />
Contains all the 3,312 duotone icons of Font Awesome 6 Pro (includes Pro icons).
https://poseidon-code.github.io/supacons/dist/classic/supacons.duotone.css
<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/classic/supacons.duotone.css" />
Sharp Icons are recent addition to Font Awesome 6 (released with Font Awesome 6 v6.3.0). It currently contains only solid, regular & light variations of sharp type. It would be updated when Font Awesome 6 releases the entire sharp icons collection.
Contains all the 3,312 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" />
Contains all the 3,312 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" />
Contains all the 3,312 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" />
Contains all the 3,312 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" />
Contains all the 3,312 sharp duotone icons of Font Awesome 6 Pro (includes Pro icons).
https://poseidon-code.github.io/supacons/dist/sharp/supacons.duotone.css
<link rel="stylesheet" href="https://poseidon-code.github.io/supacons/dist/sharp/supacons.duotone.css" />
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 brower refresh then refresh browser with
Ctrl + F5 (i.e. refreshing with cleared cache)