如何在React Native安卓项目中添加FontAwesome v4.7.0字体？

Hey there! Let's work through why you're able to load regular fonts like Titillium Web but not Font Awesome v4.7.0. Here are the key checks and fixes to try:

1. Double-Check Font File Naming & Required Files #

Even though capitalizing the filename worked for Titillium Web, Font Awesome v4.7.0 relies on specific default filenames (like fontawesome-webfont.ttf) that match the references in its official CSS. Your current Font Awesome.ttf might not align with those references.

• Make sure you have all Font Awesome v4.7.0 font files in your project's font folder: .ttf, .woff, .woff2, .eot, and .svg—missing any can break loading.
• If you want to keep your custom filename, you'll need to update every reference to the font in the Font Awesome CSS (more on that below).

2. Verify Your CSS @font-face Rules #

Font Awesome's CSS uses a @font-face declaration that points to its specific font files. Here's what the default rule looks like:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
       url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
       url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
       url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
       url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

• Confirm the file paths here match exactly where you've placed your Font Awesome fonts.
• If you renamed your .ttf to Font Awesome.ttf, replace every instance of fontawesome-webfont.ttf in this rule with your custom filename (and do the same for other font file types if you renamed them too).

3. Simplify with npm Installation (Recommended) #

Instead of manually managing font files and paths, installing Font Awesome v4.7.0 via npm avoids these naming/path headaches entirely:

1. Run this command in your project root:

   npm install font-awesome@4.7.0
   

2. Import the CSS directly in your index.js or App.js file:

   import 'font-awesome/css/font-awesome.min.css';
   

   The package handles all font references internally, so you won't have to tweak filenames or paths.

4. Test with a Basic Icon #

Once you've adjusted your setup, test with a simple icon to confirm it's working:

<i className="fa fa-check-circle"></i>

If this renders correctly, you're all set!

内容的提问来源于stack exchange，提问作者Omar Awamry