Integrating Font Awesome Icons in Ionic

Tinashe Munyaka
A free video tutorial from Tinashe Munyaka
Professional Developer, Designer & Instructor
4.2 instructor rating • 4 courses • 6,754 students

Lecture description

For those of you that are familiar with using Font Awesome, I will be showing you how you can easily integrate Font Awesome into Ionic Creator.

Learn more from the full course

Quick Mobile App Prototyping With Ionic Creator

Develop mobile app prototypes and fully functional mobile apps by using drag-and-drop components. Real apps, made easy!

02:36:31 of on-demand video • Updated April 2017

  • Have the necessary skills to develop your own apps
  • Charge other people to develop their prototypes
  • Apply for jobs that require wire-framing and prototyping skills
  • Expand your knowledge further into the world of mobile apps development
English [Auto] Hey guys. OK. So I just wanted to make another video for people that might be familiar with using forms and might be wanting to integrate forms or some icons into your applications here using your own creator. So we're not going to go deep down into one form or some is and stuff like that. I just said it's got people that are already familiar with font or some so if you are familiar with font awesome then yeah this section is for you. Or if you might be keen in using phone or something that can go ahead and read up on phone or some fun or some don't. I know. So what you want to do is we're going to go to kind of get started. And then when I want to use this phone or some CD. All right. So I'm ready. So you put in your email address and then you get the embed code so why would I want to do that work when I want and get the CD and already have my my CD and code available. So what you need to do is you need to do the following. So why not go ahead and I'm going to duplicate one of these pages here so that we can write that. I don't like that color. I would rather work on it. You probably think I don't like the color but then you design it. Well yeah. I'm from there's three options I kind of like this one the most. I say OK I enough talking. All right so the thing is what I want to do so let's just to placate this pager and you know what while I'm here let me just change this page to slider so that we know what this page it does so let's just say we'll come slider so that we know what's happening here. Ok cool. So so now we're confronted with a video slide and then this duplicate that which is not something I call this. Or some so that we just know that we are working on this one. So on this phone or someone who when I wanted to is we go I want to just change this. I couldn't hear with the phone or some icons or rather than this graphic this picture can I want to use a phone or some i can someone fess up or just delete this current. I couldn't hear what image and this feature is available for pro users anyway. So what you and I want to do is I do not want to grab your CD and you have cotton from from phones or some script and I'm just going to copy mine. And here you can add it to the code and then click on code settings and put in the script you are else on when I just command V. It needs to only be that you are also going to delete all of that and just leave the euro on me. So it looks like bad press and time. And there's my script source. There we go. Looking good. I must say close. And now I can start using forint or some icons. Ok cool. So let's go ahead and then look for a font or some icon some applicant icons. And I said maybe just a video right. You do and there's one here. And as you can see I can use it like this. Now there's something that I just want to show you quickly. Then just copy this from the screen if I would copy if I would use it like this. This command feed they come and the. All right so this is just like from W.W. from W3 school dot com by just talking about fun. Awesome So if I was let's say to want to use this car here I'm going to go ahead and do this. Copy this code which would be for this red card this red become and say command copy go big do I any creator and pasting. Asked him all code. So I'm not taken ECMO competent yet. Click and get on to our page and I'm going to paste that code in between this P-TECH command V and you won't see anything here. You only see it when you preview something that could preview. I don't think it's saved proving the right page just the font or some could be that saving there so they just wait or change you saved. OK. Yes we own this page let's preview now why is it showing me this page. Not feel one or some come work let's see what's happening and maybe there's something that I'm not seeing. OK. So fond or some HMO that is not e-mail us I don't know who's pulling that image. And you know what guys obviously it added a slider on their right. So Silly me. There it is. My apologies guys my apologies. I sincerely apologize for wasting about a minute of your time wondering what was happening. OK. So there it is. Our slide with the font awesome icon. So obviously what you want to do is we want to just make that icon not red. So let's maybe say white just for the sake of the demo right cool white and then maybe make it bigger so maybe let's make it 120 pixels and let's see OK. So kind of cool but obviously it's on the left hand side so I do when I do is that we want to move it to the center so just introduced right some siestas to put in our app here so that it makes these P-TECH center Sandison drag some some space as code for that to just line it in the center. Remember it it's like a font. So we're going to go to the millions. Yes. Yes. And then when I write in there just make a note and say this is for fun. Icons and they command V to paste and then that should align itself to say save and click on close and it should be centered. When we see no cool. So guys there you go. I just wanted to just quickly show you how you can integrate and use forint or some icons into your app and maybe just one quick thing I just want to show you this so that you can know how to extend it further in the actual code. And this one right. Can I see this thing if was just to make it spin just for fun and wouldn't run it. The should spin. There we go. So guys I mean like I'm saying it's just your creativity also plays a big role into what you guys are looking to to develop in applications. I just wanted to just show you how you can integrate phone or some icons into your and create apps. Hey guys. My bad. OK. So I just kind of ended up doing this example here. But what I wanted to show you was how to use font awesome icons right. So this particular one so see we wanted to use them just go here quickly. So let's say we wanted to use that video instead of this car for example. Right. So in front of some you would know that you can that then need to use this as that kind of I can let you be using. So if let's all go to icons and then click on let's say cog cog there. This one here all then just use as a dash cog. So if you look here in the mail yes it's a car. I'll just change that to spotlight that and run it or preview or either. And see.