Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add custom icons using fontAwesome to UIbutton in swift 4

I am currently working on an IOS application and i want to add button labels or icon using FontAwesome i have successfully installed cocoapods in my project and now i have no idea of using cocoapods for adding library FontAwesome(More info:-enter link description here) icons in my IOS Application.

  • I need to know about the procedure of adding FontAwesome using cocoapods, and
  • I need to know if their is another way to add FontAwesome to my project

thanks

like image 227
hussnain ahmad Avatar asked Nov 01 '18 10:11

hussnain ahmad


4 Answers

There are many ways of using font awesome icons in an iOS application. You can opt out any one of them according to your understanding and comfort.

Approach 1:

Writing your own logic

  • Add font awesome files into your compile source and make sure added properly (See the attached pictures)
  • Keep Unicode string of any font-awesome icon(In the example code I am taking the close icon reference. Its font awesome class and Unicode texts are fa-close and f00d respectively (See example code). In my case, I have a class where I have all font awesome icon string and another class which accept font awesome class string and returns the appropriate Unicode string.
  • Create an attributed string with that Unicode string and set it to attributedText property (See the example code below).

You can search your desired font awesome string and Unicode here

Your font awesome file looks like something similar to this

Make sure these font awesome file added to your build-phase source

Code Example

Step1

In this example, I have created an extension which returns the Unicode string.

 extension String {

     func fontAwesomeString(name: String) -> String {

         switch name {
         case "fa-close":
            return "\u{f00d}"
         default: // manage exhaustive case accordingly
         }
      } 
 }

Step2

Call above method by passing the appropriate font awesome string.

let iconUnicodeText = String.fontAwesomeString(name: "fa-close")
let iconAttributed = NSMutableAttributedString(string: iconUnicodeText)
self.iConLabel.attributedText = iconAttributed // iConLabel is a control type of UIlabel.

Or if you don't want to organise your source code you can directly create an attributed string with Unicode and set to attributedText property.

Note: You might be required to make changes in above code snippet. As I have written for Swift 4.0

Approach 2:

Using cocoa pods

Once you installed the pod library, you call the appropriate methods shown in the example as below

yourButton.titleLabel?.font = UIFont.fontAwesome(ofSize: 30, style: .brands) 
yourButton.setTitle(String.fontAwesomeIcon(name:. gitgub), for : .normal) // you may change icon type with your desired one
like image 142
Kamar Shad Avatar answered Nov 20 '22 09:11

Kamar Shad


If you have not already installed CocoaPods, these are good instructions: https://stackoverflow.com/a/25257238/8534588

Install FontAwesome with CocoaPods:

  1. Open up Podfile which is in the same folder as your .xcodeproj file
  2. Add this line to Podfile to install FontAwesome.swift: pod 'FontAwesome.swift'
  3. Save changes to Podfile
  4. Open up Terminal in the folder that contains Podfile and run the command pod install

How to use FontAwesome icons:

Add import FontAwesome_swift in your code file

Example code:

let image = UIImage.fontAwesomeIcon(name: .checkCircle, style: .solid, textColor: UIColor.black, size: CGSize(width: 40, height: 40))

like image 3
Josh Withee Avatar answered Nov 20 '22 10:11

Josh Withee


Use like below:-

Step1 : Add framework like below image enter image description here

Step 2:Drag and drop all .otf and .swift files into your project Step 3:import FontAwesome_swift Step 4: Use below code:-

let imageView  = UIImageView(frame: CGRect(x: 80.0, y: 80.0, width: 50, height: 50))
imageView.image = UIImage.fontAwesomeIcon(name: .github, style: .brands, textColor: .black, size: CGSize(width:40,height:40))
self.view.addSubview(imageView) 

Result:-

enter image description here

like image 1
V D Purohit Avatar answered Nov 20 '22 09:11

V D Purohit


I have done this in Objective C, So hope this would be useful. The procedure will be same but you need to convert the Objective C code to Swift.

So for do this in Objective C, You can follow the step mentioned in this link to add the FontAwesome manually to your project without using CocoaPod, If you are interested not to use CocoaPod

Manually Add FontAwesome

From that Github project takeout the NSString category class, i.e NSString+FontAwesome

You need to add the fontawesome-webfont.ttf in resource folder as well

NB: For me error was coming after I add NSString Category class mentioned there in the above link, If you are facing the issue like duplicate definition then just rename those enum constants those are not satisfying the variable naming convention. (For me some of the enum constant were using hypen(-) i replaced those with underscore(_)).

like image 1
Janmenjaya Avatar answered Nov 20 '22 08:11

Janmenjaya