Skip to content

Instantly share code, notes, and snippets.

@istockmarket

istockmarket/font-awesome-6-styling-with-masking.markdown

Created September 18, 2025 01:12
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save istockmarket/32d879026247520b1871f4c9062957d8 to your computer and use it in GitHub Desktop.
Download ZIP
Font Awesome 6: Styling with Masking
Raw
index.html
<html>
<head>
<title>Font Awesome: Styling with Masking</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">
<i class="fa-solid fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fa-solid fa-comment"></i>
<i class="fa-brands fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fa-solid fa-circle"></i>
<i class="fa-solid fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fa-solid fa-square" ></i>
<i class="fa-solid fa-mask" data-fa-transform="shrink-3 up-1" data-fa-mask="fa-solid fa-circle" ></i>
</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 */
/* 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