How to use Font Awesome in react native project without using any third party library?

Question

I want to use Font Awesome icons in my react-native project for android.

I want to do it manually without using any third party library like react-native-vector-icons or others.

Answer 1

i am answering it for android And ios

download font awesome zip extract the files copy fontawesome-webfont.ttf file

1. make /assets/fonts/ directory in your project directory

2. paste fontawesome-webfont.ttf into /assets/fonts/

3. rename the file to fontawesome.ttf

4. add

   "rnpm": { "assets": [ "./assets/fonts/" ] } into your end of package.json file like this

4. run react-native link command into terminal in your project directory

see reslut like this

rnpm-install info Linking assets to ios project
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

5. make sure run again react-native run-android command after successfully linked

go to fontawesome cheatsheet

copy only the character code of the icon you want to apply to a text view and paste it

<Text style={{ fontFamily: 'fontawesome', fontSize: 20 }}>&#xf0a9;</Text>

apply style fontFamily: 'fontawesome'

similarly you can do it for other vector icon fonts like ionicons

and others without using third party library like react-native-vector-icons

Answer 2

This is a bit old, but still. If you are using Create React Native App, I think this is the easiest way. Download the font and place it into 'projectfolder/assets/fonts/' directory. I renamed it to 'fontawesome.ttf'.

After that you'll need to install expo package if you don't already have it.

npm install --save expo

And add following lines to your index (App.js) file.

Firstly:

import { Font } from 'expo';

Then load the font. This code goes inside your App component:

componentDidMount() {
  Font.loadAsync({
    'Font Awesome': require('./assets/fonts/fontawesome.ttf')
  });
}

To make sure you did everything alright:

<Text style={{ fontFamily: 'Font Awesome', fontSize: 20 }}>&#xf164;</Text>

Those are original instructions.

I just wanted to make it visible without visiting the link.