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.

Ratite

Why you don't want to use any third party? – Reinke

i want to do it manually so that i can know whats going on under the hood. – Ratite

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

Ratite

I think font-awesome is overall is a font that looks like icon what library you have suggested uses the fontawesome font not the icons #kalibbala – Ratite

I used this approach for Material Icons and worked! To know the postscript name of the font file check this out github.com/facebook/react-native/issues/… – Deepsea

i have importetd FontAwesome like You described here but it displays only about the half of all free icons. is that normal or am i doing something wrong? – Vlissingen

It says unrecognized font-family fontawesome – Apprehensive

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.

Baugh

The question is asking how to add icons(fontAwesome), not adding FONTS. – Marsipobranch

Package you recommended in your answer does the same thing under the hood uses Font Awesome icons which is a font and nothing else. So if you want to add Font Awesome Icons to your site/app you add it as a font. – Baugh

Answer 3

This is an extension of the answer by Hastig (Accepted answer for this post), I hope he doesn't mind:

If you are looking for the character code, just go to the glyphs info page e.g. https://fontawesome.com/v5/icons/search?f=classic&s=solid

Take the unicode and append it to "&#x"

Pluckless

Answer 4

1. Install font-awesome library.

npm i --save react-native-fontawesome

2. Import font-awesome in your file, Add:

import FontAwesome, { Icons } from 'react-native-fontawesome';

3. Call icons where you want in your file.

{Icons.chevronLeft}

Note: After Step 1 make sure "react-native-fontawesome": "Version here" shows under dependencies in your package.json file(root application folder).

For More: https://github.com/entria/react-native-fontawesome

Marsipobranch

Perhaps you have not gone through the question properly, the question about using fontawesome icons in react-native project without using any third party library. What you have suggested is a third party library react-native-fontawesome. First go through the question before answering – Ratite