[web] Icons aren't loading in release

[mhabashy]

Hello font_awesome_flutter team,

hope you all doing well.

icons aren't loading in the release version of the web.

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.1, on macOS 11.4 20F71 darwin-x64, locale en-US) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 4.2) [✓] IntelliJ IDEA Ultimate Edition (version 2021.1.1) [✓] VS Code (version 1.56.2) [✓] Connected device (1 available)

version font_awesome_flutter: ^9.0.0

This my FontManifest.json which couldn't find any docs to help on it.

[
   {
      "family": "IconMoon",
      "fonts": [
        {
          "asset": "assets/icons/icomoon.ttf"
        }
      ]
  },
  {
    "family": "MaterialIcons",
    "fonts": [
      {
        "asset": "fonts/MaterialIcons-Regular.otf"
      }
    ]
  },
  {
    "family": "FontAwesomeRegular",
    "fonts": [
      {
        "asset": "packages/font_awesome_flutter/lib/fonts/fa-regular-400.ttf"
      }
    ]
  },
  {
    "family": "FontAwesomeSolid",
    "fonts": [
      {
        "asset": "packages/font_awesome_flutter/lib/fonts/fa-solid-900.ttf"
      }
    ]
  },
  {
    "family": "FontAwesomeBrands",
    "fonts": [
      {
        "asset": "packages/font_awesome_flutter/lib/fonts/fa-brands-400.ttf"
      }
    ]
  }
]

[michaelspiss]

Hi! I have tried to reproduce, but it does not happen with the example app (web, release mode). Your FontManifest looks good as well. I guess something went wrong with the assets (common problem). Could you run flutter clean in your project and do a rebuild?

[mhabashy]

thanks for the help. Ran flutter clean and it still didn't show the icons. Also, want to note that the network loads the fonts.

[michaelspiss]

Interesting. Can you try updating font_awesome_flutter to the newest version 9.1.0 please? Make sure to clean build again and disable caching in the browser. You are using the standard version from pub.dev, right?

[mhabashy]

updated to 9.1.0 and tried it no change.

Yes I am using https://pub.dev/packages/font_awesome_flutter standard version and these are the only fonts I have in the pubspec

  fonts:
    - family: TypoFont
      fonts:
        - asset: assets/fonts/typodermic.regular.ttf
          style: normal

    - family: IconMoon
      fonts:
        - asset: assets/icons/icomoon.ttf
          style: normal

Just in case there is conflicts

[michaelspiss]

Does this happen for all or only some font awesome icons? If it happens for all of them, please try running font_awesome_flutter's example app.

To me this looks like a flutter problem. I'd advise you to open another issue over at the flutter repository so they can take a look at whatever is happening.

[manafire]

I'm getting the same behaviour in 9.0.0 with a release appbundle - works fine otherwise in the emulator. I've overridden the package per the instructions for my Pro set. The other (non-duotone) icons work fine. If it matters, I'm conditionally determining the icon like so:

FaDuotoneIcon(
  enabled
      ? FontAwesomeIcons.duotoneLocationCrosshairs as IconDataDuotone
      : FontAwesomeIcons.duotoneLocationCrosshairsSlash as IconDataDuotone,
)

I'm going to try latest and specifying a fixed icon (non-conditional) to see if it makes a difference. If not, I'll probably just fall back to the regular icons.

[manafire]

Updating to 9.1.0 and rebuilding from scratch following the instructions, a clean build, and with latest icons fixed it in my case. Sorry, I totally just realized this was a "web" thread - didn't mean to hijack.

[michaelspiss]

I tried to reproduce this issue multiple times now, but was not able to. I'm closing this for now, as it looks like this is an individual case. Should the issue persist, feel free to reopen.

[DevFreeze]

I have the same issue, that the Icons are not showing after I ran:

flutter clean
flutter pub get
flutter build web

Even the font_awesome_flutter example project doesn't show any icons:

[michaelspiss]

Are you using some sort of AdBlocker? They sometimes block fonts from loading, so disabling them would be worth a try. Also look into your dev tools network tab. It should contain a request for a file called FontManifest.json, which in turn should contain paths to the font awesome ttf files. Make sure the files exist in your build/web directory.

If all of this seems to be ok, please send me the output of flutter doctor -v and I will try to reproduce again.