3

I have a strong need in a Windows utility like Character Map with a feature of showing CSS classnames for the characters.

That's because I use icon libraries e.g. Ionicons or Font Awesome in my designs and need to search for the css class for every single icon I used when transferring specs to the developer. It's not handy to look for it every time in browser so I guess it should be a dedicated utility I'm not familiar with. If somebody could suggest what utility to use, it would be extremely helpful!

Here is a screenshot if I was not clear enoughenter image description here

Improve this question
4
  • 1
    The CSS classes are nothing to do with the fonts themselves (they're just what that specific icon system's CSS uses; you or anyone else could in reality use whatever classes you like) so I don't think what you want exists.
    – Cai
    Commented Jun 26, 2017 at 11:57
  • Both Font Awesome and Ionicons have cheatsheets with the names of the classes; I don't think there's a dedicated utility (as CAI said, classes can be anything you decide)
    – Luciano
    Commented Jun 26, 2017 at 12:48
  • 1
    You can embed webpages into Adobe creative cloud software as panels if you want then you can have this inside ayour application. Also you can have the fontawesome as a symbol library (see here) and you could add the class into the name of the icon. So it should be doable with minimal work.
    – joojaa
    Commented Jun 26, 2017 at 12:50
  • I made this utility: photopea.github.io/Typr.js (just drag and drop a TTF / OTF file into it). If you explain what exactly do you need, I can add more features into it :)
    – Ivan Kuckir
    Commented Jun 26, 2017 at 14:58

2 Answers 2

Reset to default
2

Instead of using a 3rd party software, that is bound to have the same problems with as your browser experience, try bringing the items into your software as slightly more intelligent entities. You do not mention what software you use but you can easily bring in the symbols/shapes/library items into any adobe suite application.

enter image description here

Image 1: Font awesome as symbols with class names in Illustrator

Now you can go further and easily script automatic annotation of these items too... So do not think external app think extend your app.

Improve this answer
1
  • Thanks a lot for your script and advice given! I mostly use Illustrator so, is it possible to convert CSS stylesheet provided by ionicons in package into Illustrator Symbols library with symbols, already named as classnames in ionicons cheatsheet? Thank you in advance. @joojaa
    – Estel
    Commented Jun 27, 2017 at 9:46
2

Solution. I think icon library cheatsheet is a decision. It allows to copy a character from the cheatsheet webpage to the text field in Illustrator and then copy its classname to the name of an object. So I will not miss my icon's classname, of course, if I don't forget to name it in Illustrator already after pasting.

It's helping but, in my opinion, the problem defined in my question still requires a solution.

As you see in a screenshot, Character Map has a field where the unique Unicode number for every single character can be found. I wish I could find and copy the CSS classname for every character as easily as I see it here. (Character Map even does not allow me to copy Unicode number, just see it.) Logically, there should be a feature to upload CSS stylesheet which icon library like Ionicons includes in its package.

As I mostly use Illustrator, the best for me would be to have symbols named by its classnames, so you would have a library and easily operate with your icons, changing, trying different ones and never miss their classnames. As a result, provide the classnames to your developer any time on demand.

I will try a script mentioned in the first answer (many thanks to its author), I'm not enough experienced in this so hope I'll do it right and it will work. Thanks a lot for your opinions, people, you are awesome, I learned something new!

Improve this answer

Your Answer

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

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