Using Nerd Fonts as an easy way around icons

[BlueJive]

Hi all!

This is my first post here, and to be honest I'm not actually sure if it's allowed. But here's a little trick that I like to use instead of downloading an icon, resizing it, editing it to be the desired color and then fiddling around with positioning. Instead you can use a trick called "using nerd fonts"

These fonts are icon aggregators, and using them is as easy as installing the font, labelling the font in your code, and copying and pasting in the desired icon.

Look here for a complete list of nerd fonts. And here for a list of downloads. I picked this up when I was using Arch Linux, and it's super easy.

A couple of people on the Rainmeter discord server weren't too keen on it, saying that they preferred the classic way. But I find this also reduces the need for image meters, and more. You can just go Text= <- this is a ghost icon I also use this font in my firefoxcss now, because it's so useful.



So thanks, and give it a try! There's 3600+ icons available just by copying and pasting text. And tell me what you think, I've been wondering if I should start including them in my code. Can you think of a downside?

Anyway, thanks for reading. (Hope it's allowed)

[jsmorley]

If the intent of the font is to use it with Rainmeter, I would not necessarily advise installing the font in Windows.

Just put it in ..@Resources\Fonts in the root config of your skin, and then use Character Variables to insert the desired glyph into your Rainmeter code.

https://docs.rainmeter.net/manual/skins/resources-folder/#Fonts
https://docs.rainmeter.net/manual/variables/character-variables

This is really the only practical way to distribute a skin that uses the font.

Code: Select all

[MeterExample]
Meter=String
FontSize=25
FontWeight=400
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
InlineSetting=Face | 3270Medium Nerd Font
InlinePattern=[\xf79f]
InlineSetting2=Color | 77,255,77,255
InlinePattern2=[\xf79f]
Text=This is a [\xf79f]  character

1.jpg

2.jpg

Not to say that you shouldn't install the font if you intend to use one of the variants as a font for your general purpose programming or other uses. Just keep in mind that others won't have the font if you distribute your skin(s) unless you use the approach above.

[BlueJive]

Sorry morley. Don't know what I was saying there. That's what I meant

[deflore08]

Huh.. So useful for me, i am already tired of drawing icons with shape meters, lol. Thank you.

[BlueJive]

Glad I helped someone!

[JelleDekkers]

I've been using icon fonts for quite some time now, they're a lot easier to use than shape meters! There's one thing I have to add though: if the icon is drawn at 24px for example, you should set the font size to "24*0.75". From what I can tell, it doesn't actually render it at 24px without the 0.75 factor. This is also why all of the string meters I make multiply the size by 0.75.

[Active Colors]

From what I can tell, it doesn't actually render it at 24px without the 0.75 factor.

That's because Rainmeter uses points, not pixels.
1 pt = 1.333(3) px
That is why you are multiplying by 0.75 to convert into pixels.

[Active Colors]

I use this tool when working with icon fonts https://us.fontviewer.de/
It is especially helpful since font icons are sharp only at specific sizes.

Capture.PNG

[jsmorley]

It is especially helpful since font icons are sharp only at specific sizes.

I sorta resist that, since fonts are mathematical vector'ish representations, and not "images" as such. They should look equally good as long as they are large enough to fully render. They certainly can be "too small" to look right, but I doubt that they would have any upper limit without looking just fine.

[Active Colors]

I sorta resist that, since fonts are mathematical vector'ish representations, and not "images" as such. They should look equally good as long as they are large enough to fully render. They certainly can be "too small" to look right, but I doubt that they would have any upper limit without looking just fine.

Capture.PNG

This font icon 'remixicon' looks crisp at 18 and 36 sizes, but everything between looks smudged. I think this happens with most of such icon fonts and fonts in general because they don't have hinting https://en.wikipedia.org/wiki/Font_hinting. Hinted fonts are a bit larger in filesizes but look sharp at any font size. Not the best example but here is 'Inter UI' font unhinted vs. hinted. Notice how inconsistent the unhinted version looks like on the image below.

Artboard 1.png

Many unhinted fonts would look smudged or blurred at some font sizes than hinted. Check this unhinted 'HK Grotesk' and hinter 'Inter UI' comparison:

HK Grotesk.PNG

Inter UI.PNG