Greasy Fork

GitHub font preview: is it possible to make available globally?

While I am more of a designer than developer, a cursory look at this userscript leads me to believe it can be used not only to preview filetype icons and glyphs but also perhaps enable those of us with more of a focus on custom css to use fonticon packs globally in our stylesheets to inject icons by calling classes without having to include JavaScript. I've been out of the game awhile, and forgotten perhaps as much as has changed in the past six years or so. So please, be gentle and forgive me if these are stupid, obvious, or impossible questions. Thanks to the author and community in advance.

Hi @Moscarda!

I believe the current trend is to use inline SVGs instead of fonts for icons. This is due to the problems of waiting for the font to load and render (see FOUT, FOIT, FOFT).

Anyway, there are a bunch of font icon libraries like Font Awesome where you load the font and insert an element with a specific class name, e.g. <i class="fas fa-camera-retro"></i>. You also have an option to use Font Awesome as inline SVGs (ref).

Another really cool alternative is Google's Material icons. Where you load in their font & css, but instead of selecting the icon by class, you enter the plain text name of the icon inside of the HTML element, e.g. <i class="material-icons">face</i>. This method uses internal font ligatures to combine the text letters into the icon you desire.

Because font libraries include a bunch of icons you don't need, most developers don't use complete font icon libraries... enter IconMoon, and other similar sites, that let you grab icons from various font libraries and combine them into a custom font icon library.

Injecting icons as a font is really too much trouble if you need to load in a font, add css and insert HTML. It is way easier to insert an inline SVG as HTML and be done.

Hopefully, that brief introduction will get you started. Did I answer your question?

Rob

Hopefully, that brief introduction will get you started. Did I answer your question?

Rob, thanks for the prompt reply. Yes it'll get me started should I use TamperMonkey for all my CSS customisation. However, doesn't inserting HTML require JavaScript rather than regular CSS? I should have mentioned in my post that I prefer to use Stylish over TamperMonkey whenever possible, as I am more fluent in CSS than JavaScript and also because scripts can break or behave erratically, not play well with others when multiple userscripts are enabled, or because of @run-at settings. So ideally I was hoping for a scenario in which I could write/modify a TamperMonkey or Stylish script that would make an icon library available globally to call in other scripts. If this is possible, great--though I'm afraid your answer doesn't get me started down that path. Otherwise, is there a sample userscript I could reference; something that I could cut and paste when I need to make icons available in a new script?

Either way, thank you again for your time!

-M

First off, I've stopped using Stylish because the new owners track everything about you. I'm using Stylus now.

Personally, I wouldn't use TamperMonkey for CSS customization unless absolutely necessary. CSS3 is a lot more powerful; and Stylus/Stylish will allow you to inject background images.

For example, in our GitHub Dark style, we replace all checkbox and radio inputs with a custom SVG background image (ref). You should be able to download a individual font icon as an SVG, optimize it with SVGOMG, convert it into a DataURI using duri.me, then add it to your custom style as a background image. Use :before or :after to add it if the element already has a background image.

I've stopped using Stylish because the new owners track everything about you. I'm using Stylus now.

I read the same thing, and also switched to Stylus about a year ago. I'm still in the habit of referring to it as Stylish as its been around and has name recognition. Kinda like referring to any torrent client as BitTorrent.

Personally, I wouldn't use TamperMonkey for CSS customization unless absolutely necessary.

I couldn't agree more. I guess I did a terrible job explaining myself in the original post, but that is what I was thinking when I said global. I could be misunderstanding some of the fundamental ways TamperMonkey works, but I was hoping that I could create a single global TamperMonkey script that would load lightweight resources [icons, etc] available to call whenever necessary in my Stylus css. Is that not possible? The first step seems doable, afaik...though I can see how the two extensions might have problems communicating?

For example, in our GitHub Dark style, we replace all checkbox and radio inputs with a custom SVG background image (ref). You should be able to download a individual font icon as an SVG, optimize it with SVGOMG, convert it into a DataURI using duri.me, then add it to your custom style as a background image. Use :before or :after to add it if the element already has a background image.

I've heard of this method and will definitely dive in for a closer look. Thank you SO much, you've been incredibly helpful.

...and if you could, just lemme know what you think of my idea for loading globally available icons via TamperMonkey for using their CSS selector in my Stylus scripts, whether its a good idea or even possible.

Yes, it would be possible to create a userscript to load and/or inject assets into a page; but some sites, like GitHub have a strong CSP which would restrict what can be added.

As far as communication between the extensions, it would be possible via the DOM or global JavaScript variable. For example, the userscript would load the asset then add a class name to the body indicating that the asset was successfully loaded.

If you're only planning on loading a font icon library, you won't need a userscript - check out how to use @font-face.