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

问题

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.

回答1:

i am answering it for android And ios

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

make /assets/fonts/ directory in your project directory
paste fontawesome-webfont.ttf into /assets/fonts/
rename the file to fontawesome.ttf
add

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

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

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

回答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.

回答3:

Install font-awesome library.

npm i --save react-native-fontawesome

Import font-awesome in your file, Add:

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

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

来源：https://stackoverflow.com/questions/45906391/how-to-use-font-awesome-in-react-native-project-without-using-any-third-party-li

标签

android

react-native

font-awesome