iOS - UIBarButtonItem Identifier - option to create "settings" cogwheel button

Question

I want to create a UIBarButtonItem to represent the app's settings (cogwheel). Presently I can only find an option to create UIBarButtonItem (Interface Builder > Attributes Inspector > identifier) such as "Add" (+), "Edit", "Done", "Cancel" etc

I can't find an option to create a settings (cogwheel) icon. Is there a way to do this in interface builder or through code?

Or do I have to create an image and then the image ?

@scordova88 thanks a lot for confirming that, I just saw an article that teaches to draw a cogwheel artwork http://coreldraw.com/forums/t/25477.aspx — user1046037, Mar 18 '12 at 01:40

score 64 · Accepted Answer · answered Mar 18 '12 at 03:14

64

Unicode has several notable examples you can simply copy and paste into a string declaration in Xcode, or use the standard Unicode String Escape (\uxxxx) and iOS is actually quite fluent when it comes to Unicode (I know some of the char's are fairly ugly, but that's Unicode for ya'):

Unicode Character 'GEAR WITHOUT HUB' (U+26ED): http://www.fileformat.info/info/unicode/char/26ed/index.htm

Unicode Character 'GEAR' (U+2699): http://www.fileformat.info/info/unicode/char/2699/index.htm

Or prepare an image and set the UIBarButtonItem's customView property accordingly.

answered Mar 18 '12 at 03:14

CodaFi

43,043
8
107
153

awesome !! thanks a ton!! I was spending a lot of time trying to build the image (am not so familiar with drawing softwares) to match the gradient of the toolbar – user1046037 Mar 18 '12 at 07:35
uicode looks good and definitely a big time saver !!. One small doubt how do I increase the font size of the uibarbuttonitem. – user1046037 Mar 18 '12 at 07:46
25

as CodaFi had pointed out, it works like a charm!! `self.settingsBarButton.title = @"\u2699"; UIFont *f1 = [UIFont fontWithName:@"Helvetica" size:24.0]; NSDictionary *dict = [[NSDictionary alloc] initWithObjectsAndKeys:f1, UITextAttributeFont, nil]; [self.settingsBarButton setTitleTextAttributes:dict forState:UIControlStateNormal];` – user1046037 Mar 18 '12 at 08:00
3

For anyone looking to do this in Swift/iOS 8, I had to do `self.settingsBarButton.title = NSString(string: "\u{2699}")`, `if let font = UIFont(name: "Helvetica", size: 18.0) ...` `self.settingsBarButton.setTitleTextAttributes([NSFontAttributeName: font], forState: UIControlState.Normal)` – matthewpalmer Nov 28 '14 at 07:18
There is a small problem, the "image" appears aligned with the top of the frame, I had a "+" button in the other side of a UINavigationBar and and it is very noticeable that the alignment is not the same. Do you have any solution for that? – human4 Aug 06 '15 at 01:16
9

As of iOS9.1, the unicode character now gets converted into an emoji, which looks really strange on the navigation bar. Is there any way to use the old symbol? – Gus Jan 14 '16 at 20:57
8

@Gus to prevent the emoji conversion you have to add \u0000FE0E after your unicode character. For Objective-C it would be `self.settingsBarButton.title = @"\u2699\u0000FE0E";`. In Swift `NSString(string: "\u{2699}\u{0000FE0E}")` – hazelnut Apr 14 '16 at 16:17
It has not been mentioned yet that it is possible to use Interface Builder directly to enter the Unicode characters. Have a look at https://stackoverflow.com/questions/11070428/how-to-enter-unicode-characters-in-a-uilabel-in-interface-builder. I used this technique to find the gear and copy it to the field in the UI – Jeff Muir Jun 15 '17 at 00:27

score 16 · Answer 2 · edited Mar 24 '15 at 17:35

Composing CodaFi and user1046037 answers:

Creating UIBarButtonItem with unicode character as a title.

You have to initialize UIBarButtonItem with title (initWithTitle:) not system item (initWithBarButtonSystemItem:).

You can set custom title with string (such as unicode character).

You can resize title.

UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithTitle:@"\u2699" style:UIBarButtonItemStylePlain target:self action:@selector(showSettings)];

UIFont *customFont = [UIFont fontWithName:@"Helvetica" size:24.0];
NSDictionary *fontDictionary = @{NSFontAttributeName : customFont};
[settingsButton setTitleTextAttributes:fontDictionary forState:UIControlStateNormal];

Murray Sagal · Answer 3 · 2021-03-02T01:52:08.383

This works in Swift 5 and iOS 14.4...

    let settingsButton = UIBarButtonItem(title: NSString(string: "\u{2699}\u{0000FE0E}") as String, style: .plain, target: self, action: #selector(self.settingsBtn(_:)))
    let font = UIFont.systemFont(ofSize: 28) // adjust the size as required
    let attributes = [NSAttributedString.Key.font : font]
    settingsButton.setTitleTextAttributes(attributes, for: .normal)
    self.navigationItem.rightBarButtonItem = settingsButton

See @hazelnut's comment in the accepted answer. Without adding \u{0000FE0E} to the string it shows up as an emoji and is immune to any appearance settings. Adding that string fixes that.

It's `let attributes = [NSAttributedStringKey.font: font]` in Swift 4 — algrid, Jun 11 '18 at 17:14

score 6 · Answer 4 · edited Feb 02 '21 at 02:06

To get the cogwheel icon using Swift, do the following in viewDidLoad(), assuming you have wired up your button from your view into your controller. (Ex: @IBOutlet var settingsButton: UIBarButtonItem!)

self.settingsButton.title = NSString(string: "\u{2699}") as String
if let font = UIFont(name: "Helvetica", size: 18.0) {
    self.settingsButton.setTitleTextAttributes([NSFontAttributeName: font], forState: UIControlState.Normal)
}

iOS - UIBarButtonItem Identifier - option to create "settings" cogwheel button

4 Answers4