Error404 Error404 - 1 year ago 94
iOS Question

How can I make an UIButton with more than one line using FontAwesome?

I need an

with more than one line. The first line will have an icon of
and the second one a word explaining the icon.

Also, the font size of both lines has to be different in each row.

Here is what I have by the moment:

@IBOutlet weak var btnProfile: UIButton!

let paraStyle = NSMutableParagraphStyle()
paraStyle.lineBreakMode = NSLineBreakMode.byWordWrapping
paraStyle.alignment =

let icon = NSMutableAttributedString(string: "\u{f082}", attributes: [NSFontAttributeName: UIFont.init(name: "FontAwesome", size: 40)])
let text = NSMutableAttributedString(string:"\nProfile", attributes: [NSFontAttributeName:UIFont.systemFont(ofSize: 12.0)])

icon.addAttribute(NSParagraphStyleAttributeName, value: paraStyle, range: NSRange(location:0,length: icon.length))

btnProfile.setAttributedTitle(icon, for: .normal)

but I am getting the following error:

Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[_SwiftValue renderingMode]: unrecognized selector sent to instance

I also have tried using the square with the interrogation symbol inside instead of
but the problem is the same.

I know that the problem is on the last two lines because if I comment them, the application does not throws any exception.

Also I have tried it using storyboard:

enter image description here

and it works almost well. Both lines are shown with icon + text but the text has the font and font-size of the icon and I want them to be different. Here a screenshot:

enter image description here

What am I doing wrong? I do not care if I solve this by code or by storyboard.

Thanks in advance!

Joe Joe
Answer Source

Try this code:

Tested in Swift 3.

override func viewDidLoad() {

     //applying the line break mode
    btnProfile?.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping;

    let buttonText: NSString = "⭐️ Favourite\nProfile"

    //getting the range to separate the button title strings
    let newlineRange: NSRange = buttonText.range(of: "\n")

    //getting both substrings
    var substring1: NSString = ""
    var substring2: NSString = ""

    if(newlineRange.location != NSNotFound) {
        substring1 = buttonText.substring(to: newlineRange.location) as NSString
        substring2 = buttonText.substring(from: newlineRange.location) as NSString

    //assigning diffrent fonts to both substrings
    let font:UIFont? = UIFont(name: "Chalkduster", size: 50.0)
    let attrString = NSMutableAttributedString(string: substring1 as String, attributes: NSDictionary(object: font!, forKey: NSFontAttributeName as NSCopying) as? [String : Any])        
    let font1:UIFont? = UIFont(name: "Noteworthy-Light", size: 30.0)
    let attrString1 = NSMutableAttributedString(string: substring2 as String, attributes: NSDictionary(object: font1!, forKey: NSFontAttributeName as NSCopying) as? [String : Any]) 

    //appending both attributed strings

    //assigning the resultant attributed strings to the button
    btnProfile.setAttributedTitle(attrString, for: UIControlState.normal)
    btnProfile.titleLabel?.textAlignment = .center



enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download