It is currently March 28th, 2024, 6:03 pm

Using Nerd Fonts as an easy way around icons

Tips and Tricks from the Rainmeter Community
Post Reply
User avatar
BlueJive
Posts: 27
Joined: February 25th, 2021, 6:45 am
Contact:

Using Nerd Fonts as an easy way around icons

Post by 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 :D I also use this font in my firefoxcss now, because it's so useful.

Image

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) :welcome:
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using Nerd Fonts as an easy way around icons

Post by 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.
User avatar
BlueJive
Posts: 27
Joined: February 25th, 2021, 6:45 am
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by BlueJive »

Sorry morley. Don't know what I was saying there. That's what I meant :)
User avatar
deflore08
Posts: 209
Joined: July 12th, 2020, 7:47 am
Location: Ada, Garden City
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by deflore08 »

Huh.. So useful for me, i am already tired of drawing icons with shape meters, lol. Thank you. :)
User avatar
BlueJive
Posts: 27
Joined: February 25th, 2021, 6:45 am
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by BlueJive »

Glad I helped someone!
User avatar
JelleDekkers
Posts: 127
Joined: September 27th, 2017, 6:32 pm
Location: Netherlands
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by 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.
User avatar
Active Colors
Moderator
Posts: 1251
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by Active Colors »

JelleDekkers wrote: March 28th, 2021, 6:25 pm 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.
User avatar
Active Colors
Moderator
Posts: 1251
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by 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
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Using Nerd Fonts as an easy way around icons

Post by jsmorley »

Active Colors wrote: March 28th, 2021, 9:04 pm 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.
User avatar
Active Colors
Moderator
Posts: 1251
Joined: February 16th, 2012, 3:32 am
Location: Berlin, Germany
Contact:

Re: Using Nerd Fonts as an easy way around icons

Post by Active Colors »

jsmorley wrote: March 28th, 2021, 9:22 pm 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
HK Grotesk
Inter UI.PNG
Inter UI
Post Reply