Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <a class="other-version-link" href="https://codepen.io/MarkBoots/full/YzqRKPw" target="_blank">
  <i class="fa-regular fa-square-caret-right"></i> v5 Cheatsheet</a>
<header>
  <h1>FontAwesome 6 Cheatsheet<span><span class="version alert"></span></h1>
  <h2>click & copy</h2>
</header>
<nav>
  <div class="filters-container">
    <div class="import-fa">
      <span class="importhtml" aria-label="copy HTML link"
        >link <i class="fa-brands fa-html5"></i
      ></span>
      <span class="importcss" aria-label="copy CSS @import"
        >@import <i class="fa-brands fa-css3-alt"></i
      ></span>
    </div>
  </div>
</nav>
<main>
  <div class="icons-container"></div>
</main>
<div class="clipboard">
  <h3>Copied to clipboard</h3>
  <code></code>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;700;900&display=swap");
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.other-version-link {
  position: fixed;
  top: 0.5em;
  right: 0.5em;
  text-decoration: none;
  color: black;
}
.other-version-link:hover {
  color: red;
}
.other-version-link i {
  color: red;
}
body {
  width: 100%;
  /* min-height: 100vh; */
  font-family: sans-serif;
  font-family: "Roboto", sans-serif;
  padding: 2rem 0;
  background-color: rgb(235, 235, 235);
}
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1em;
}
header h1 {
  font-size: 3rem;
  text-align: center;
  position: relative;
}
header h1 .version {
  position: absolute;
  right: 0;
  top: calc(100% - 0.6rem);
  font-size: 0.8rem;
  color: red;
}
header h1 .version.alert:after {
  content: "\26a0";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
}

nav {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgb(235, 235, 235);
  box-shadow: 0 6px 5px rgba(0, 0, 0, 0.2);
}

nav .filters-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  padding: 1em 0;
  text-align: center;
  font-weight: bold;
}

nav .filters-container > * {
  display: flex;
  gap: 0.5em;
}

nav .filters-container label.active {
  text-decoration: underline;
  cursor: pointer;
  color: green;
}

nav .import-fa > *:hover {
  text-decoration: underline;
  cursor: pointer;
}

main .icons-container {
  padding: 2em 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
}

main .icons-container .icon-container {
  display: grid;
  grid-template-columns: 40px 150px 40px;
  gap: 0.5em;
  padding: 0.5em;
  background-color: white;
  border-radius: 0.25em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  font-size: 0.8em;
}

main .icons-container .icon-container .icon-wrap {
  display: grid;
  place-items: center;
  /* cursor: pointer; */
}
main .icons-container .icon-container .icon-wrap i {
  font-size: 25px;
}

main .icons-container .icon-container .icon-name:hover,
main .icons-container .icon-container .icon-unicode:hover {
  text-decoration: underline;
  cursor: pointer;
}
main .icons-container .icon-container .icon-name {
  align-self: center;
  justify-self: left;
}
main .icons-container .icon-container .icon-unicode {
  place-self: center;
  color: #888;
}

[aria-label] {
  position: relative;
}

[aria-label]:hover::after,
[aria-label]:hover::before {
  position: absolute;
  content: "";
  background-color: black;
}
[aria-label]:hover::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 0.5em;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: normal;
}
[aria-label]:hover::before {
  width: 1em;
  height: 1em;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.clipboard {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 50%;
  pointer-events: none;
  cursor: pointer;
  border-radius: 0 0 0.5em 0.5em;
  background-color: white;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
  padding: 1rem 2rem 3rem 2rem;
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: all 250ms ease;
}
.clipboard.active {
  transform: translate(-50%, 0%);
  opacity: 1;
}
.clipboard h3 {
  text-align: center;
  margin-bottom: 0.5em;
}

              
            
!

JS

              
                let fa_version = "v6.0.0-beta1";
let cdnUrl = `https://pro.fontawesome.com/releases/${fa_version}/css/all.css`;
let faCategories, faIcons;
let filtersContainerEl = document.querySelector(".filters-container");
let iconsContainerEl = document.querySelector(".icons-container");
let iconContainerEl = document.querySelector(".icon-container");
let clipboard = document.querySelector(".clipboard");
let clipboard_code = document.querySelector(".clipboard code");
let copyHTMLbtn = document.querySelector(".importhtml");
let copyCSSbtn = document.querySelector(".importcss");
let h1versionEl = document.querySelector("h1 .version");
h1versionEl.innerHTML += `${fa_version}`;

let faMemberships = [
  { membership: "free", label: "Free"},
  { membership: "pro", label: "Pro"},
]
let faStyles = [
  { style: "regular", label: "Regular" },
  { style: "solid", label: "Solid" },
  { style: "brands", label: "Brands" },
  { style: "thin", label: "Thin (pro)" },
  { style: "light", label: "Light (pro)" },
  { style: "duotone", label: "Duotone (pro)" },
];
let selectedFilters = {
  membership: "free",
  style: "",
  category: "",
  search: "",
};

loadCdn(cdnUrl);
getData();

async function getData() {
  let jsonPath = "https://keho.nl/mb/codepenfiles/fontawesome/v6/";
  let [res1, res2] = await Promise.all([
    fetch(jsonPath + "v6_categories.json").then((response) => response.json()),
    fetch(jsonPath + "v6_icons.json").then((response) => response.json()),
  ]);
  faCategories = res1.data.release.categories;
  faIcons = res2.data.allIcons.icons;
  buildFilters();
  updateIconList();
}

function buildFilters() {
  filtersContainerEl.prepend(
    buildMembershipFilter(),
    buildStyleFilter(),
    buildCategoryFilter(),
    buildSearchFilter()
  );
}
function buildMembershipFilter(){
  let filterEl = document.createElement("div");
  filterEl.classList.add("filter-membership");
  let selectEl = document.createElement("select");
  selectEl.id = "membership-select";
  faMemberships.forEach((faMembership)=>{
    let option = document.createElement("option");
    option.value = faMembership.membership;
    option.textContent = faMembership.label;
    selectEl.append(option);
  })
  //eventListeners
  selectEl.addEventListener("change", () => {
    selectedFilters.membership = selectEl.value;
    updateIconList();
  })
  filterEl.append(selectEl);
  return filterEl;
}
function buildStyleFilter() {
  let filterEl = document.createElement("div");
  filterEl.classList.add("filter-style");
  let labelEl = document.createElement("label");
  labelEl.setAttribute("for", "style-select");
  labelEl.innerText = "Style";
  let selectEl = document.createElement("select");
  selectEl.id = "style-select";
  let firstOption = document.createElement("option");
  firstOption.value = "";
  firstOption.textContent = "---";
  selectEl.append(firstOption);
  faStyles.forEach((faStyle) => {
    let option = document.createElement("option");
    option.value = faStyle.style;
    option.textContent = faStyle.label;
    selectEl.append(option);
  });
  //eventListeners
  selectEl.addEventListener("change", () => {
    selectedFilters.style = selectEl.value;
    selectedFilters.style.length > 0
      ? labelEl.classList.add("active")
      : labelEl.classList.remove("active");
    updateIconList();
  });
  labelEl.addEventListener("click", () => {
    selectEl.value = "";
    selectedFilters.style = selectEl.value;
    labelEl.classList.remove("active");
    updateIconList();
  });
  filterEl.append(labelEl, selectEl);
  return filterEl;
}
function buildCategoryFilter() {
  faCategories.sort((a, b) => {
    var x = a.label.toLowerCase();
    var y = b.label.toLowerCase();
    return x < y ? -1 : x > y ? 1 : 0;
  });
  let filterEl = document.createElement("div");
  filterEl.classList.add("filter-category");
  let labelEl = document.createElement("label");
  labelEl.setAttribute("for", "category-select");
  labelEl.innerText = "Category";
  let selectEl = document.createElement("select");
  selectEl.id = "category-select";
  let firstOption = document.createElement("option");
  firstOption.value = "";
  firstOption.textContent = "---";
  selectEl.append(firstOption);
  faCategories.forEach((faCategory) => {
    let option = document.createElement("option");
    option.value = faCategory.id;
    option.textContent = faCategory.label;
    selectEl.append(option);
  });
  //eventListeners
  selectEl.addEventListener("change", () => {
    selectedFilters.category = selectEl.value;
    selectedFilters.category.length > 0
      ? labelEl.classList.add("active")
      : labelEl.classList.remove("active");
    updateIconList();
  });
  labelEl.addEventListener("click", () => {
    selectEl.value = "";
    selectedFilters.category = selectEl.value;
    labelEl.classList.remove("active");
    updateIconList();
  });
  filterEl.append(labelEl, selectEl);
  return filterEl;
}
function buildSearchFilter() {
  let filterEl = document.createElement("div");
  filterEl.classList.add("filter-style");
  let labelEl = document.createElement("label");
  labelEl.setAttribute("for", "search-text");
  labelEl.innerText = "Search";
  let textEl = document.createElement("input");
  textEl.type = "text";
  textEl.id = "search-text";
  //eventListeners
  textEl.addEventListener("keyup", () => {
    selectedFilters.search = textEl.value;
    selectedFilters.search.length > 0
      ? labelEl.classList.add("active")
      : labelEl.classList.remove("active");
    updateIconList();
  });
  labelEl.addEventListener("click", () => {
    textEl.value = "";
    selectedFilters.search = textEl.value;
    labelEl.classList.remove("active");
    updateIconList();
  });
  filterEl.append(labelEl, textEl);
  return filterEl;
}

function updateIconList() {
  iconsContainerEl.innerHTML = "";
  let resultIcons = [];
  faIcons.forEach((faIcon) => {
    let lookupIn = faIcon.membership.free
    if (selectedFilters.membership == 'pro' ) lookupIn = faIcon.styles;
    lookupIn.forEach((style) => { //use to include PRO results
    // faIcon.membership.free.forEach((style) => {
      if (
        //check if icon style is same to filter or filter is empty
        (selectedFilters.style.trim() === style ||
          selectedFilters.style.trim() === "") &&
        //check if icon has category same to filter or filter is empty
        (faIcon.categories.includes(selectedFilters.category.trim()) ||
          selectedFilters.category.trim() === "") &&
        //check if icon aliases array or icon label include part of searchString or filter is empty
        (arrIncludeSubStr(
          [...(faIcon.aliases.names || []), faIcon.id, faIcon.label],
          selectedFilters.search
        ) ||
          selectedFilters.search.trim() === "")
      ) {
        resultIcons.push({
          id: faIcon.id,
          label: faIcon.label,
          unicode: faIcon.unicode,
          style: style,
        });
      }
    });
  });
  resultIcons.forEach((icon) => {
    iconsContainerEl.append(createIcon(icon));
  });
}

function createIcon(icon) {
  //container
  let containerEl = document.createElement("div");
  containerEl.classList.add("icon-container");
  //icon
  let iconWrapEl = document.createElement("div");
  iconWrapEl.classList.add("icon-wrap");
  let iconEl = document.createElement("i");
  iconEl.classList.add(`fa-${icon.style}`, `fa-${icon.id}`);
  iconWrapEl.append(iconEl);
  //name
  let iconNameEl = document.createElement("div");
  iconNameEl.classList.add("icon-name");
  iconNameEl.setAttribute("aria-label", "Copy HTML");
  iconNameEl.textContent = icon.id;
  iconNameEl.addEventListener("click", () => {
    copyHtml(icon);
  });

  //unicode
  let iconUnicodeEl = document.createElement("div");
  iconUnicodeEl.classList.add("icon-unicode");
  iconUnicodeEl.setAttribute("aria-label", "Copy CSS");
  iconUnicodeEl.textContent = icon.unicode;
  iconUnicodeEl.addEventListener("click", () => {
    copyUnicode(icon);
  });

  containerEl.append(iconWrapEl, iconNameEl, iconUnicodeEl);
  // <i class="fa-solid fa-user"></i>

  return containerEl;
}

function resetFilters() {
  selectedFilters = defaultFilters;
}

function strIncludeSubStr(str, search) {
  return str.replace("-", " ").indexOf(search.trim().toLowerCase()) !== -1;
}
function arrIncludeSubStr(arr, search) {
  if (!Array.isArray(arr)) return false;
  filtered = arr.filter(function (str) {
    return strIncludeSubStr(str, search);
  });
  return filtered.length > 0;
}

function loadCdn(cdnUrl) {
  let headID = document.getElementsByTagName("head")[0];
  let link = document.createElement("link");
  link.type = "text/css";
  link.rel = "stylesheet";
  link.href = cdnUrl;
  headID.appendChild(link);
}

copyCSSbtn.addEventListener("click", () => {
  let clip = `@import url('${cdnUrl}')`;
  copyToClipboard(clip);
});
copyHTMLbtn.addEventListener("click", () => {
  let clip = `<link rel="stylesheet" href="${cdnUrl}"></link>`;
  copyToClipboard(clip);
});

function copyUnicode(icon) {
  let fontLookup = {
    solid: { fontFamily: "Font Awesome 6 Pro", fontWeight: 900 },
    regular: { fontFamily: "Font Awesome 6 Pro", fontWeight: 400 },
    light: { fontFamily: "Font Awesome 6 Pro", fontWeight: 300 },
    thin: { fontFamily: "Font Awesome 6 Pro", fontWeight: 100 },
    duotone: { fontFamily: "Font Awesome 6 Duotone", fontWeight: 900 },
    brands: { fontFamily: "Font Awesome 6 Brands", fontWeight: 400 },
  };
  let font = fontLookup[icon.style];
  let clip = `content: '\\${icon.unicode}';\nfont-family: '${font.fontFamily}';\nfont-weight: ${font.fontWeight};`;
  copyToClipboard(clip);
}
function copyHtml(icon) {
  let clip = `<i class="fa-${icon.style} fa-${icon.id}"></i>`;
  copyToClipboard(clip);
}

function copyToClipboard(clip) {
  let temp = document.createElement("textarea");
  document.body.appendChild(temp);
  temp.value = clip;
  temp.select();
  document.execCommand("copy");
  document.body.removeChild(temp);

  clipboard_code.innerText = clip;
  clipboard.classList.add("active");

  setTimeout(function () {
    clipboard.classList.remove("active");
  }, 2000);
}

              
            
!
999px

Console