Skip to content

Instantly share code, notes, and snippets.

@istockmarket

istockmarket/font-awesome-6-styling-with-layers-and-counters.markdown

Created October 13, 2025 19:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save istockmarket/f3e45bae0ed27ffd7496be6bf8fd9651 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save istockmarket/f3e45bae0ed27ffd7496be6bf8fd9651 to your computer and use it in GitHub Desktop.
Download ZIP
Font Awesome 6: Styling with Layers and Counters
Raw
font-awesome-6-styling-with-layers-and-counters.markdown
Raw
index.html
<html>
<head>
<title>Font Awesome: Styling with Layers and Counters</title>
<!-- We're using a Pro SVG+JS Kit to load Font Awesome Version 6 Latest -->
<!-- Get your own Kit at fontawesome.com/kits -->
<script src="https://kit.fontawesome.com/5d93eb1089.js" crossorigin="anonymous"></script>
</head>
<body>
<main class="demo-frame">
<section class="demo">
<article class="demo-example">
<!-- The code for this feature showcase starts here -->
<!-- An example of masking -->
<div class="sample masking">
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fa-solid fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-bookmark"></i>
<i class="fa-inverse fa-solid fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-play" data-fa-transform="rotate--90 grow-4"></i>
<i class="fa-solid fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fa-solid fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fa-solid fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa-solid fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
</div>
<!-- The code for this feature showcase end here -->
</article>
</section>
</main>
</body>
</html>
Raw
script.js
/* JS for this feature */
Raw
style.css
/* CSS styling for this feature */
/* fix for a temporary bug with layering */
.fa-layers svg.svg-inline--fa {
background: transparent;
}
/* demo styling - you don't need these styles for your power tranforms */
.sample {
margin: var(--spacing-xl);
padding: var(--spacing-xl);
border: 2px solid var(--fa-navy);
border-radius: var(--border-radius-md);
background-color: var(--white);
}
.sample .svg-inline--fa {
background-color: MistyRose;
}
Raw
styles
<link href="https://codepen.io/fontawesome/pen/wvjxwQM/beefb5e0a98c2ab1c3fb8cd349fb15b1.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment