Embedding An Icon Inline With Text

When it comes to working with text in an application, embedding icons within the text can help make a UI more user-friendly. For example, if a certain feature or menu in the application was represented by a specific icon, that same (smaller) icon can be used elsewhere in the app to create a clear chain of reference.

Take the following text:

"This feature can be enabled in the 🔒security settings“

Imagine that the “security” menu was also represented by the same icon on its respective menu, this would tie things nicely together to increase ease of use.

That’s just a simple example, with many useful implementations for inline icons. 

But how do you do this in Storyboard?

The first thought might be to separate the text and the icon into separate controls/render extensions. And while that’s certainly a viable solution, extra work will need to be done in order to calculate the exact position the icon needs to have.

A much simpler solution would be to add the icon as a font glyph so that it can be utilized as part of the string itself. Given that an application doing this would likely have many glyphs, it makes sense to have a custom font file containing all of the glyphs.

At this point you now have two separate font files, so how do you use two different fonts in one string? 

Rich Text!

With Rich Text you can combine multiple fonts in a single string which would enable you to have a robust way of implementing this nice quality of life feature.

You can read how to use Rich Text to use multiple fonts here: https://support.cranksoftware.com/hc/en-us/community/posts/6153957972884-How-to-use-multiple-fonts-in-one-string

As for creating/editing a font, this can be done with third party software tools such as FontForge.