Working with Icon Fonts in Swift Part 1.
Icons are the most important aspect for any Mobile to make a better user interface to engage with App users. to make an application more attractive and to generate new user designers put efforts into creating icons for application.
This means a developer has to put many images in the application bundle to solve this problem.
To use icons in your application Apple has provided two ways to add images in an application bundle, that is PNG and vector-based(PDF) images. which leads to an increase in the size of an application
Want to read this story later? Save it in Journal.
The problem in using images for icons in an application
- if you use PNG in your application that means you have to create three scale size for every image used in the application
- To solve this problem you can you vector-based images in your application.
There is a problem with using these approaches in your application. if you go with the PNG approach there are possible chance images will pixelate if you use a large container for small size images.
To solve this problem there a new approach i.e is using a font-based icon in an application and that will help to reduce app weight and easy management of icon in the application.
An easy way to bring icons into your project is through icon fonts. Icon fonts are like any other font, so you can use them anywhere you can insert text. another advantage of icons from fonts is that they are vector images. This means you can control the size and color programmatically with clean results.
Now let dive into programming to integrate font icons in your application in this small tutorial I am going to use SwiftUI for the design part, swift 5.2 for programming, and XCode 11.4.1 as development IDE.
Adding a font icon in your application is just like adding normal custom font in any iOS application for this you just need icon based fonts.
For generating font for the demo project I have used icomoon App. there are many other tools also available in the market to generate font icons. before starting this tutorial make sure you have downloaded all required assets for your application. find the link in the last of this story. I will also post the compression between the normal approach and icon-based approach at the end of this tutorial.
How to:-
Step 1. Add the font file to your Xcode project.
Step 2. Add font into your application list file.
Step 3. confirm whether the font is added correctly in an application or not.
To check this you can use the below snippet.
for family: String in UIFont.familyNames {
print("Font Family :----------:", family)
for names: String in UIFont.fontNames(forFamilyName: family) {
print("======= \(names)")
}
}
check the fonts are associated with the project.
If you have done correctly to this step then you have achieved your first milestone for the tutorial, now dive into program part to use these added fonts to your application and let so the world true power of it.
Step 4. Let create enums and extensions in a constants file to define the font and sizes available in the app.
enum FontIcon: String {
case bitcoin = "\u{ed69}"
case beatsbydre = "\u{ed63}"
case apple = "\u{ed3f}"
case backArrow = "\u{f1ea}"
case Netflix = "\u{ef25}"
case chatBubble = "\u{f120}"
case twitter = "\u{f04a}"
}
Step 5. Now create a SwiftUI Button To showcase your talent.
struct IMButton: View {
let cornerRadius: Double
let title: String
let foregroundColor: Color
let indicatorColor: Color
let iconFont: FontIcon
let iconColor: Color var body: some View {
ZStack(alignment: .leading) {
RoundedRectangle(cornerRadius: 5)
.frame(width: .some(300), height: 50)
.foregroundColor(foregroundColor)
LeftCorner(cornerRadius: cornerRadius)
.trim(from: 0.39, to: 0.61)
.fill(indicatorColor)
.frame(width: .some(300), height: 50)
HStack {
Text(iconFont.rawValue)
.padding(.leading, 15)
.font(.custom("iconfont", size: 30))
.foregroundColor(iconColor)
Text(title).bold()
.padding(.leading, 20)
}
}
}
}struct IMButton_Previews: PreviewProvider {
static var previews: some View {
IMButton(cornerRadius: 5, title: "Hello", foregroundColor: .red, indicatorColor: .green, iconFont: .apple, iconColor: .blue)
}
}struct LeftCorner: Shape {
let cornerRadius: Double
func path(in rect: CGRect) -> Path {
return .init(roundedRect: rect, cornerSize: .init(width: cornerRadius, height: cornerRadius))
}
}
Step 6. Now add your newly created button into your main view
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: DetailView(iconFont: .apple, color: .green)) {
IMButton(cornerRadius: 6, title: "Login with Apple", foregroundColor: .yellow, indicatorColor: .red, iconFont: .apple, iconColor: .white)
.frame(width: 300, height: 50, alignment: .leading)
}
NavigationLink(destination: DetailView(iconFont: .Netflix, color: .red)) {
IMButton(cornerRadius: 6, title: "Login with Netflix", foregroundColor: .yellow, indicatorColor: .red, iconFont: .Netflix, iconColor: .green)
.frame(width: 300, height: 50, alignment: .leading)
}
NavigationLink(destination: DetailView(iconFont: .twitter, color: .blue)) {
IMButton(cornerRadius: 6, title: "Login with Twitter", foregroundColor: .yellow, indicatorColor: .red, iconFont: .twitter, iconColor: .blue)
.frame(width: 300, height: 50, alignment: .leading)
.navigationBarTitle(Text("Logins"))
}
}
}
}
}struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Step 7. Now let see the preview what you have created
For complete working demo download through below link
https://github.com/intelmehra/FontIconDemo/tree/develop
In Next Part, we are going to compare the traditional way and new font icon way
Important Link
https://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/
📝 Save this story in Journal.