Show FontAwesome Icon/Glyph IDs in a Design Spec
There MUST a way for XD to show the unicode ID of a FontAwesome icon/glyph in the Styles panel of a Design Spec wireframe/mockup.
I've got a team of developers freaking-out on me because they are not able to tell what the FontAwesome icon ID is in an Adobe XD mockup. I'm using FontAwesome so I do not have to re-create hundreds of required icons, but when I show a particular developer a mockup of the web-app for him to code for, it becomes a nightmare for me and developer figuring out all the specifics of each individual icon. They can see in the Styles panel that it's FontAwesome, the size, color, weight, font (the particular font of the type-face), but nowhere is there an indication of the glyph/icon ID (the unicode #). I could add it in a "Note" but that becomes a tedious eyesore to use. It needs to appear in the Styles panel, PLEASE.
MarkR
shared this idea
-
Nadine Gin
commented
YES PLEASE!!!!!!
-
Kalyn Bowen
commented
Absolutely NEED this for developer handoff!!!! Having to go back and find all the unicodes for the icons I used in a design is a huge unnecessary time drain
-
Wil Drover
commented
Yes definitely need these. Need the unicode to show in the content panel in view specs.
-
Harun Alikadić
commented
I have hard time converting the unicode value to other (hex or name). If you copy the value and paste it to FontAwesome icone search it gives you no result. You need to use an external converter, such as http://www.babelstone.co.uk/Unicode/whatisit.html in order to unveil the hex value and then use it in your app or find it on FA website.
Can XD help with this? For example, allowing us to use directly hex/name value in XD design part (it works for other icon fonts such as Material)? -
Carly Reeves (NFXS)
commented
100% need this to streamline dev handover.
Ideally the icon 'friendly name' is shown in the 'Content' section of the Spec panel, AND the unicode is listed in the 'CSS' section, i.e. content: "\f778"
-
PN
commented
And this is a wealth. https://fontawesome.com/icons?d=gallery&q=lock
You can copy and paste -
PN
commented
Actually, this is the one you were calling out.
-
PN
commented
Here's an open lock from Font Awesome.
-
PN
commented
On the Mac OS, Go to Font Book and select FontAwesome. Look at the Preview pane and select the character you're looking for. Hover state over the selection reveals the Unicode.
-
MarkR
commented
As of August 6, 2019, a few of the FontAwesome names are shown in the "Content" field, but WE NEED THE UNICODE, please, and all of the them, please!
