Hi and welcome to our tutorial on font awesome in React native.
In this video, we'll be discussing what
Font awesome is, why it's useful, and how to use it in your React Native app.
Font awesome is a popular icon library
that allows you to add scalable vector icons to your website or app.
It provides a wide range of icons that can
be easily customized to fit your design needs.
With Font awesome, you can easily add icons to your
React Native app without the need for additional image files.
Adding icons to your React Native app can
greatly enhance the user experience and make your app more visually appealing.
Font awesome also provides a consistent look and feel across all platforms,
making it a great choice for cross platform applications.
Additionally, since Fontawesome is a vector based icon library,
it can be easily scaled to any size without losing quality.
Now let's get to coding and
let's install our Font awesome icons and see how we can use them.
You're now looking at my screen and
what I want to show you is what Font awesome is.
So let's go to Google, open a new window here and go to FontAwesome
awesome website and check out the icons that they have.
They have all kinds of categories here that you can explore from.
For example, if you go to coding,
you're going to see a bunch of icons connected to coding.
So you have icons about anything that you
want here and you have all the instructions on how to use them as well.
So now we want to install the Font awesome icon in our application.
And for this, we're just going to go
to Font Awesome React Native icons and then let's click on their GitHub link.
And here should be a link to the official documentation
let's go there.
So let's copy this first of all and go
to open a new terminal and then let's go to our application.
And then let's just paste this here.
It's going to take some time, so I'm going to just quicken up the video
and you can come back once your installation is complete.
And then we need to install the pods for iOS.
So let's copy this and just paste it here.
And then as suggested,
let's use their command to install different kinds of icons that they offer.
So let's copy it one by one.
We need this folder here.
Let's get out of iOS folder
and do the installation here.
Great, that has been installed.
Let's install the next one right now and then let's install the third one.
And now all the installation process has
been completed and it's really recommended that you close your Metro bundler
and restart your app just in case your SVG paths are not linked.
So I'm going to do that and you can come
back to the video once you rerun your application as well.
Great.
Now that you're back, you're now looking at my editor and I want
to show you how to use Font awesome in your application.
First of all you're going to need to import the Font awesome icon library
and then let's say that we want to show the user a checkbox here.
Next to submit for this we're going
to need FA check and it's recommended by my imports that I
use this so I'm just going to use it, hopefully it will work and then I'm going
to use FontAwesome Icon and I'm going to use the FA check that I imported here.
I'm going to close this and I'm going to give it a style of a white color so
that we're able to see it and if I save this
we're going to see an error, it might be because of this so let's save this again.
Okay, great.
So you don't need the FA check here and then we see that it takes the whole
block here and we can put them together again.
So we will need a view for this to group
them together and we're going to need the Flex styling and we're going to get
into Flex very soon guys, so don't worry if you don't know what this is yet.
And then we can use the Align Items Center
so that they are vertically centered and we can use the Justify Content Center
so that it's horizontally centered as well.
By the end of this video you should have a basic understanding of what FontAwesome is,
why it's useful and how to use it in your react native app.
You should now be able to install FontAwesome in your own react native app and use
to add scalable vector icons to your application.
Thanks for watching and see you in the next video.