Skip to content

Instantly share code, notes, and snippets.

@LintangWisesa

LintangWisesa/fontAwesomeTutor.html

Created February 18, 2023 07:15
Show Gist options
  • Save LintangWisesa/d27e07421c7472353f28432400cebd02 to your computer and use it in GitHub Desktop.
Save LintangWisesa/d27e07421c7472353f28432400cebd02 to your computer and use it in GitHub Desktop.
Download ZIP
Font Awesome Tutorial
Raw
fontAwesomeTutor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- REPLACE LINE BELOW WITH YOUR FONT AWESOME KIT JS/CSS CODE -->
<script src="https://kit.fontawesome.com/your-font-awesome-kit-id.js" crossorigin="anonymous"></script>
<title>Font Awesome Tutorial</title>
</head>
<body>
<h1>Font Awesome</h1>
<p>1. SVG code</p>
<svg height="5%" width="5%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M171.3 96H224v96H111.3l30.4-75.9C146.5 104 158.2 96 171.3 96zM272 192V96h81.2c9.7 0 18.9 4.4 25 12l67.2 84H272zm256.2 1L428.2 68c-18.2-22.8-45.8-36-75-36H171.3c-39.3 0-74.6 23.9-89.1 60.3L40.6 196.4C16.8 205.8 0 228.9 0 256V368c0 17.7 14.3 32 32 32H65.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H385.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H608c17.7 0 32-14.3 32-32V320c0-65.2-48.8-119-111.8-127zM434.7 368a48 48 0 1 1 90.5 32 48 48 0 1 1 -90.5-32zM160 336a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>
<svg height="5%" width="5%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="red" d="M171.3 96H224v96H111.3l30.4-75.9C146.5 104 158.2 96 171.3 96zM272 192V96h81.2c9.7 0 18.9 4.4 25 12l67.2 84H272zm256.2 1L428.2 68c-18.2-22.8-45.8-36-75-36H171.3c-39.3 0-74.6 23.9-89.1 60.3L40.6 196.4C16.8 205.8 0 228.9 0 256V368c0 17.7 14.3 32 32 32H65.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H385.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H608c17.7 0 32-14.3 32-32V320c0-65.2-48.8-119-111.8-127zM434.7 368a48 48 0 1 1 90.5 32 48 48 0 1 1 -90.5-32zM160 336a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>
<svg height="5%" width="5%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#58ff09" d="M171.3 96H224v96H111.3l30.4-75.9C146.5 104 158.2 96 171.3 96zM272 192V96h81.2c9.7 0 18.9 4.4 25 12l67.2 84H272zm256.2 1L428.2 68c-18.2-22.8-45.8-36-75-36H171.3c-39.3 0-74.6 23.9-89.1 60.3L40.6 196.4C16.8 205.8 0 228.9 0 256V368c0 17.7 14.3 32 32 32H65.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H385.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H608c17.7 0 32-14.3 32-32V320c0-65.2-48.8-119-111.8-127zM434.7 368a48 48 0 1 1 90.5 32 48 48 0 1 1 -90.5-32zM160 336a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"/></svg>
<p>2. SVG image</p>
<img height="5%" width="5%" src="mycar.svg">
<img height="5%" width="5%" src="mycar.svg"
style="filter: invert(70%) sepia(40%) saturate(5000%) hue-rotate(5deg) brightness(90%) contrast(100%)"
>
<!-- https://isotropic.co/tool/hex-color-to-css-filter -->
<img height="5%" width="5%" src="mycar.svg"
style="filter: invert(58%) sepia(25%) saturate(554%) hue-rotate(104deg) brightness(97%) contrast(84%);"
>
<p>3. Font Awesome Kit</p>
<i class="fa-solid fa-car-side" style="color:cyan"></i>
<p class="fa-solid fa-car-side" style="color:darksalmon"></p>
<span class="fa-solid fa-car-side" style="color:darkmagenta"></span>
<p>4. Sizing manual (CSS)</p>
<svg height="2%" width="2%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
<img height="2%" width="2%" src="userA.svg"/>
<i class="fa-solid fa-user" style="font-size: xx-small;"></i>
<i class="fa-solid fa-user" style="font-size: xx-large;"></i>
<i class="fa-solid fa-user" style="font-size: 200%;"></i>
<i class="fa-solid fa-user" style="font-size: 50px"></i>
<p>5. Sizing font awesome class</p>
<i class="fa-solid fa-user fa-2xs"></i>
<i class="fa-solid fa-user fa-xs"></i>
<i class="fa-solid fa-user fa-sm"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-user fa-lg"></i>
<i class="fa-solid fa-user fa-xl"></i>
<i class="fa-solid fa-user fa-2xl"></i>
<p>6. Scaling font awesome class</p>
<i class="fa-solid fa-user fa-1x"></i>
<i class="fa-solid fa-user fa-2x"></i>
<i class="fa-solid fa-user fa-3x"></i>
<i class="fa-solid fa-user fa-4x"></i>
<i class="fa-solid fa-user fa-5x"></i>
<i class="fa-solid fa-user fa-6x"></i>
<i class="fa-solid fa-user fa-7x"></i>
<i class="fa-solid fa-user fa-8x"></i>
<i class="fa-solid fa-user fa-9x"></i>
<p></p>
<i class="fa-solid fa-user fa-10x"></i>
<i class="fa-solid fa-user" style="font-size: 160px;"></i>
<p>7. Stacking</p>
<i class="fa-solid fa-camera fa-2x"></i>
<i class="fa-solid fa-ban fa-2x"></i>
<span class="fa-stack">
<i class="fa-solid fa-camera fa-stack-1x"></i>
<i class="fa-solid fa-ban fa-stack-2x" style="color: tomato;"></i>
</span>
<p>8. Animasi</p>
<!-- BEAT -->
<p>Beat</p>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 3s"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2"></i>
<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; --fa-beat-scale: 0.5"></i>
<!-- FADE -->
<p>Fade</p>
<i class="fa-solid fa-ghost"></i>
<i class="fa-solid fa-ghost fa-fade"></i>
<i class="fa-solid fa-ghost fa-fade" style="--fa-animation-duration: 3s"></i>
<i class="fa-solid fa-ghost fa-fade" style="--fa-fade-opacity: 0"></i>
<i class="fa-solid fa-ghost fa-fade" style="--fa-fade-opacity: 0; --fa-animation-duration: 3s"></i>
<!-- BEAT FADE -->
<p>Beat Fade</p>
<i class="fa-solid fa-bolt-lightning"></i>
<i class="fa-solid fa-bolt-lightning fa-beat-fade"></i>
<i class="fa-solid fa-bolt-lightning fa-beat-fade" style="--fa-beat-fade-opacity: 0"></i>
<i class="fa-solid fa-bolt-lightning fa-beat-fade" style="--fa-beat-fade-scale: 2"></i>
<i class="fa-solid fa-bolt-lightning fa-beat-fade" style="--fa-beat-fade-scale: 2; --fa-beat-fade-opacity: 0"></i>
<!-- FLIP -->
<p>Flip</p>
<i class="fa-brands fa-bitcoin"></i>
<i class="fa-brands fa-bitcoin fa-flip"></i>
<i class="fa-brands fa-bitcoin fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 0; --fa-flip-z: 0"></i>
<i class="fa-brands fa-bitcoin fa-flip" style="--fa-flip-x: 0; --fa-flip-y: 1; --fa-flip-z: 0"></i>
<i class="fa-brands fa-bitcoin fa-flip" style="--fa-flip-x: 0; --fa-flip-y: 0; --fa-flip-z: 1"></i>
<i class="fa-brands fa-bitcoin fa-flip" style="--fa-flip-x: 1; --fa-flip-y: 1; --fa-flip-z: 1"></i>
<!-- SPIN -->
<p>Spin</p>
<i class="fa-solid fa-futbol"></i>
<i class="fa-solid fa-futbol fa-spin"></i>
<i class="fa-solid fa-futbol fa-spin fa-spin-reverse"></i>
<i class="fa-solid fa-futbol fa-spin fa-spin-pulse"></i>
<!-- BOUNCE -->
<p>Bounce</p>
<i class="fa-solid fa-futbol fa-bounce"></i>
<!-- SHAKE -->
<p>Shake</p>
<i class="fa-solid fa-futbol fa-shake"></i>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
mycar.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
userA.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment