search

fluttercommunity / font_awesome_flutter

The Font Awesome Icon pack available as Flutter Icons
Other
831 stars 233 forks source link

Icon not rendering in Web Build - Hosted in AWS Amplify #259

Closed MadDashMurphy closed 4 months ago

MadDashMurphy commented 4 months ago

Describe the bug Icons are being display in the standard square box with a cross through them when displayed in a web site, built using flutter.

Note that they display fine when run in Chrome, launched by Android Studio using the --release flag.

To Reproduce Steps to reproduce the behavior:

  1. Create Flutter Project
  2. Include font_awesome_flutter flutter pub add font_awesome_flutter. Version included is 10.7.0.
  3. Use icons in your design. I used FontAwesomeIcons.linkedin, FontAwesomeIcons.envelope and FontAwesomeIcons.copy
  4. Test in Android and Chrome via Android Studio.
  5. Build web version: flutter build web --release
  6. git commit and push.
  7. AWS Amplify is set up to update a staging website based on /build/web.

Expected behavior Display the icons.

Screenshots Screenshot showing missing icons:

image

Screenshot showing icons working in Chrome using --release flag:

image

Desktop (please complete the following information):

Same thing is displayed in Safari and Firefox.

Additional context I've seen some similar issues reported but they are usually around using an old version of the font_awesome_flutter package or or the flutter build items being cached. Neither of these issues apply here, so either I'm doing something mental, there is an issue with AWS Amplify or there is a bug.

Just spotted that when loading the site, I get the following error:

main.dart.js:7998 Font family packages/font_awesome_flutter/FontAwesomeBrands not found (404) at assets/packages/font_awesome_flutter/lib/fonts/fa-brands-400.ttf

MadDashMurphy commented 4 months ago

Added the error message. I'll do a little more digging.

MadDashMurphy commented 4 months ago

Going to close. I needed to perform the following steps:

  1. Add the following fonts to my fonts folder: fa-brands-400.ttf, fa-regular-400.ttf, fa-solid-900.ttf
  2. Add the fonts to pubspec.yaml
  3. Build
  4. Ensure that the folder build/web/assets/packages/font_awesome_flutter was included when pushing through to my deployment branch

Pubspec.yaml: ` fonts: