Using Unicode Characters as Images for Buttons, Labels and Alerts

Wed, Dec 11

I stumbled upon this trick recently, using Unicode characters as images to add graphics within buttons (UIButton), labels (UILabel) and alerts (UIAlertView). The same trick should apply for other controls where you specify a string for display.

For example, here is a code block to show Unicode images in an alert:

1
2
3
4
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"System Error"
                              message:@"Unable to download file."
                              delegate:self cancelButtonTitle:@"\u26A0 Ignore"
                              otherButtonTitles:@"\U0001F504 Retry ", nil];

The output looks as follows:
Unicode characters as an image in UIAlertView

Notice on line 3 the Unicode value is specified using a lowercase ‘\u’ whereas the character on line 4 is ‘\U’ – this has to do with the length of the character. Unicode values over 4 characters must begin with ‘\U’

The same logic applies with buttons and labels, a button definition follows:

testButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[testButton setFrame:CGRectMake(80, 330, 160, 40)];
[testButton setTitle:@"\u2705 Continue" forState:UIControlStateNormal];
[testButton addTarget:self action:@selector(buttonPressed:) forControlEvents: UIControlEventTouchUpInside];        
[[self view] addSubview:testButton];

Unicode characters as an image in UIButton

How To View Unicode Characters As Images

My preferred way to view unicode characters is using the Mac Character Viewer.

- Go to System Preferences/Keyboard
- Tick the checkbox ‘Show Keyboard and Character Viewers in menu bar
- From the menu bar select Show Character Viewer
- When you find a symbol and right click to Copy Character Info

Once copied, you’ll have information that looks as follows:

BLACK DIAMOND SUIT
Unicode: U+2666 U+FE0F, UTF-8: E2 99 A6 EF B8 8F

Copy/paste the Unicode value (e.g. 2666).

Other Uses of Unicode

I have a feeling there are other unique ways to use Unicode values. If you have and tips or recommendations on related tools, please leave a comment.

One comment

Great tip. Thank you for sharing.

by Julian on Dec 12, 2013. #