Last active
September 23, 2025 11:24
-
-
Save biast12/6c8fb1bf831119f991c1ea241ba8d2c9 to your computer and use it in GitHub Desktop.
Adds a tab to copy only the Font Awesome class names from icon pages.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name Font Awesome - Only Copy Classes | |
| // @namespace https://fontawesome.com/ | |
| // @version 1.2 | |
| // @description Adds a tab to copy only the Font Awesome class names from icon pages. | |
| // @author Biast12 | |
| // @match https://fontawesome.com/icons/* | |
| // @grant GM_setClipboard | |
| // ==/UserScript== | |
| (function () { | |
| 'use strict'; | |
| class FontAwesomeClassCopier { | |
| constructor() { | |
| this.selectors = { | |
| tabList: '.codeblock-tabbed .tabs', | |
| htmlTab: '#tab-html', | |
| codeBlock: '.codeblock-tabbed code', | |
| customTab: '#copy-class-tab' | |
| }; | |
| this.config = { | |
| buttonText: 'Copy Classes', | |
| successText: '✅ Copied!', | |
| errorText: "Couldn't find class string.", | |
| feedbackDuration: 2000 | |
| }; | |
| this.observer = null; | |
| this.init(); | |
| } | |
| init() { | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', () => this.setup()); | |
| } else { | |
| this.setup(); | |
| } | |
| } | |
| setup() { | |
| this.injectButton(); | |
| this.startObserver(); | |
| } | |
| startObserver() { | |
| if (this.observer) { | |
| this.observer.disconnect(); | |
| } | |
| this.observer = new MutationObserver(() => { | |
| this.injectButton(); | |
| }); | |
| this.observer.observe(document.body, { | |
| childList: true, | |
| subtree: true | |
| }); | |
| } | |
| injectButton() { | |
| const tabList = this.getElement(this.selectors.tabList); | |
| if (!tabList || this.buttonExists()) { | |
| return; | |
| } | |
| const button = this.createButton(); | |
| if (button) { | |
| tabList.prepend(button); | |
| } | |
| } | |
| buttonExists() { | |
| return !!document.querySelector(this.selectors.customTab); | |
| } | |
| getElement(selector) { | |
| return document.querySelector(selector); | |
| } | |
| createButton() { | |
| const htmlTab = this.getElement(this.selectors.htmlTab); | |
| if (!htmlTab) { | |
| return null; | |
| } | |
| const button = document.createElement('button'); | |
| button.id = 'copy-class-tab'; | |
| button.textContent = this.config.buttonText; | |
| button.type = 'button'; | |
| button.role = 'tab'; | |
| button.className = htmlTab.className; | |
| button.addEventListener('click', () => this.handleCopy(button)); | |
| return button; | |
| } | |
| handleCopy(button) { | |
| const classes = this.extractClasses(); | |
| if (!classes) { | |
| this.showError(); | |
| return; | |
| } | |
| this.copyToClipboard(classes); | |
| this.showSuccess(button); | |
| } | |
| extractClasses() { | |
| const codeBlock = this.getElement(this.selectors.codeBlock); | |
| if (!codeBlock) { | |
| return null; | |
| } | |
| const match = codeBlock.textContent.match(/class="([^"]+)"/); | |
| return match ? match[1] : null; | |
| } | |
| copyToClipboard(text) { | |
| if (typeof GM_setClipboard === 'function') { | |
| GM_setClipboard(text, 'text'); | |
| } else { | |
| navigator.clipboard.writeText(text).catch(err => { | |
| console.error('Failed to copy:', err); | |
| }); | |
| } | |
| } | |
| showSuccess(button) { | |
| const originalText = button.textContent; | |
| button.textContent = this.config.successText; | |
| setTimeout(() => { | |
| button.textContent = originalText; | |
| }, this.config.feedbackDuration); | |
| } | |
| showError() { | |
| alert(this.config.errorText); | |
| } | |
| destroy() { | |
| if (this.observer) { | |
| this.observer.disconnect(); | |
| this.observer = null; | |
| } | |
| } | |
| } | |
| const copier = new FontAwesomeClassCopier(); | |
| window.addEventListener('beforeunload', () => { | |
| copier.destroy(); | |
| }); | |
| })(); |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Font Awesome - Only Copy Classes
Install a browser extension for managing user scripts (skip if you already have one):
Install The Script from this Github
If you wanna Support me on Paypal or Join my Patreon!