There is an element of confusion when it comes to use FontAwesome in an Ionic Application. To include this fonts library in Ionic needs a bit of configuration and this step by step guide will provide just that.
Create a new Ionic application or you can follow these steps to include FontAwesome in your Ionic application. Nothing will break down.
https://gist.github.com/90498020c9bd7a7896764f145bd6006a
Now, install the FontAwesome package from npm
and save it in the app's dependencies:
https://gist.github.com/33e0a346828fb47f59bf3ce404e650f7
Type the above in the root folder of your app. This will add the font-awesome
folder under node_modules
. The --save
option will include the package inside the dependencies section of package.json
file.
Now wander to the src/index.html
file and add the following link
tag just above build/main.css
:
https://gist.github.com/b0040616c72c66cf048c778b12b870aa
Ionic includes a copy script file that is called during the build process when the command ionic serve
executes and it is responsible for moving specific and required resources from node_modules
to the www
folder such as ionicons.
The location of this script file is under node_modues
folder:
Copy this file and paste in inside a new directory called config
under the root directory of your Ionic application. Open the file and add fontawesome entries at the bottom of this file.
https://gist.github.com/74b0cdb7b5a13e1f302e34c59635fe8b
We must include this custom script inside our package.json
file to override the one where we copied the orignal file from. Open the package.json
file and add this json code:
https://gist.github.com/08567e25ae079c74934b6cc80f2c0c54
That's it in the configuration part.
To implmenet FontAwesome in this or any Ionic application after the above configuration, we try adding some fonts on our pre-generated home page.
https://gist.github.com/98aae19c3adec9bd96b58b9ef429047f
There are more than 675 icons available in FontAwesome and I think a combination of both Ionicons and FontAwesome will be enough for some the applications out there. You can even style them, change their font-size
and color as per your needs.