👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Tip: Using Dingbats in Text Components

· Posted by Mike in Products · 3 Comments

Text components are interesting in Mockups. We have a lot of wiki-style syntax for formatting, and a lot of people have been asking to extend this to do things like insert icons into them. It's tricky because while a lot of us want icon insertion, this is one of those things that'll take some time to support with the current text engine.

Knowing how to exploit the characters available to you with the font you're using in Mockups can help you with some simple use cases. An example that came up today was that a user wanted to insert icons into the combo box, but didn't want to have to overlay icons on the component. I added a feature request to our queue to support selection in Combo Box, but in the meantime, you want to get work done, and you may not like overlaying components.

Here's a possible way to do it. This technique might only work for Desktop, and your mileage will vary if you're sharing your Mockups files and using config files for specifying an alternate font.

On my Mac, I used a dingbat pasted from character viewer, with tabs (Alt+Tab on Windows, Option+Tab on Mac) to create the leading spaces. The output looks like this:

That should work for the default font, or for system fonts.

To view the character map in Windows, go to Run and type in charmap.exe.

To view the character map on the Mac, see Apple Support instructions for setting up character viewer.

With a text component in focus, you can bring up your character viewer and select and insert characters into Mockups.

Depending on what font you're using, you can do all kinds of wacky stuff with dingbats.

Have fun with it.

Mike for the Balsamiq Team

Leave a Comment

Comments (3)

  1. Hi, Jenni. The Mockups font is ready to put in the oven when Peldi and Marco have some free cycles.

    That last screenshot shows dingbats from the font that I drew by hand. More preview screenshots here.

  2. This is awesome Mike. I might have thought of this myself, since I’ve actually use the character viewer to occasionally insert accented characters, if Comic Sans MS actually included dingbat characters.

    I seem to recall you guys were going to create a custom font that would ship with the Desktop version in order to get away from relying on Comic Sans MS and whatever similar fonts are on the Mac and Unix/Linux systems. Has anything happened with that?

    :-j(enni)

    Jenni Merrifield
  3. I love it. Thanks for that.