How can I view the symbols included in tme-fa-icons (font.css)?

Question

So, I've long been curious about what exactly is included in tme-fa-icons. As far as I know, there isn't any print out of it. No look up table at all.

So, it's encoded in base64. Do I need to decode it? What then? What do I need to do to just get a nice organized table of what symbols come as standard? A table that will show the symbol and whatever archaic code sugarcube uses to call on that icon. Help?

Answer 1

You are correct that the tme-fa-icons WOFF font is base64 encoded within the contents of the font.css file.

The answer to the Decode base64-encoded string to font file - unicode range question on the Stackoverflow website explains the steps required to extract the required base64 data from the font-family String.

It also explains how to use the Opinionated Geek website to convert that base64 data into a file with a BIN file extension, which you can then convert into a valid WOFF font file using the Online Font Converter website.

Once you have your tme-fa-icons.woff file you can then use Torinak's List glyphs in font web-page to view the glyphs (symbols) within the font.

WARNING: The font may be copyrighted so if you are planing to use it then I would suggest contacting TheMadExile first.

Answer 2

I believe that the following link shows the current set of font icon glyphs offered by tme-fa-icons: http://www.motoslave.net/sugarcube/tmp/tme-fa-icons/

 

Comments

Oh right! Yeah, that's what I've been looking for all along.

I had a question though. Originally I was using this:

a.macro-back:before {
	font-family: 'icomoon-sugarcube';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a.macro-back:before { content: "\e00a\00a0\00a0"; }

But the code for the symbol I want in the new font is "0xe816". So... how do I use it, in that kind of above code?

So, if I have this:

a.macro-back:before {
	font-family: 'tme-fa-icons';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a.macro-back:before { content: "0xe816\00a0\00a0"; }

It doesn't work. And it's obviously wrong. So...how do I have 0xe816 with two spaces following? Do I put it in a string like is shown?

It's good that you still have the old symbols, even if they're not in use anymore.

 

---

Try the following:

a.macro-back:before,
a.macro-return:after {
	font-family: "tme-fa-icons";
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	speak: none;
}
a.macro-back:before {
	content: "\e816\00a0\00a0";
}
a.macro-return:after {
	content: "\00a0\00a0\e817";
}

 

---

Oh, I worked it out.

So, you leave off the 0x part. Anyway, I got it working. But, I think I like the shape of the arrows of the old font (icomoon-sugarcube) more than the modern equivalents. So, I'll probably continue to use those instead.

Here's a comparison, if people are curious.

tme-fa-icons

icomoon-sugarcube

I can't seem to embed images here. But, the links go to images. Anyway, I'm gonna leave this here, and go back to writing.

---

Oh, I see. You were writing at the same time. Thanks.