1

Font Awesome has a cheatsheet where they've converted their icons into html entities that you can copy and paste right into Sketch (and other editing programs), that changes the type element to the icon you want (as long as you have the font installed). Demo: http://recordit.co/Irr9HBpVPX

I'm wondering how to do this with my company's own custom font. We have an internal living style guide that has all of our custom icons as CSS content code (as pseudo element background images), but not as type. I'm wondering how to convert them to type-able content that I could just copy and paste in using our custom font in Sketch.

Any help appreciated – thanks

Improve this question

1 Answer 1

Reset to default
0

Do your CSS background images exist as vector drawings, or just pixel images?

A simple way to create icon fonts is via Icomoon, but you will need SVG files of your icons. Icomoon will generate an icon font plus a demo.html file similar to FontAwesome.

Basically icon fonts are just like normal fonts, except that their 'letters' are mapped to Unicode IDs that are not accessible by a normal keyboard. However, they can be copy/pasted like any other letter.

Improve this answer
2
  • Ah, so they're unicode. OK, so probably the best way to do this is to convert through icomoon then get the unicode letters that come with them, or to somehow convert CSS content code into unicode (not sure if that is even possible...). Thanks!
    – user5494847
    Nov 28, 2017 at 19:55
  • If you have an existing font file, you can import it to Icomoon and then export it right away, which will generate your cheatsheet. You don't need the new font, just the demo.html which will show your font mapping list.
    – AAGD
    Nov 29, 2017 at 9:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.