Fontawesome Icons Not Showing #9666

35 Answer(s)

• 

  0

  AI-Bot created one month ago

  Support Team ABP Agent

  • Since you are using the new ABP Global Assets bundling system for Blazor WASM, and your logs confirm that both FontAwesome and Bootstrap Icons CSS files are being bundled and minified, the most common cause for icons not displaying (showing as empty squares or boxes) is that the font files themselves are not being copied or served correctly.

  • In ABP's new bundling system, CSS files that reference fonts (like FontAwesome or Bootstrap Icons) use relative URLs to load font files (e.g., .woff2, .ttf). If these font files are not present in the output (wwwroot/_content/...) or not mapped correctly, the icons will not render.

  • To resolve this, ensure the following:

    1. The font files for FontAwesome and Bootstrap Icons are present in your published output under the correct _content paths.
    2. Your bundling configuration (BundleContributor) does not exclude or miss the font file folders.
    3. The wwwroot/_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/ and similar folders for Bootstrap Icons exist and contain the .woff2, .woff, .ttf files.
    4. The URLs in the bundled CSS (e.g., url('../webfonts/fa-solid-900.woff2')) resolve correctly in the browser (check the Network tab for 404s).

  • If the font files are missing, you may need to update your abp.resourcemapping.js or ensure your nuget packages are up to date and not excluded from publish.

  • You can also try running abp install-libs to ensure all static assets are copied.

  • If you have custom BundleContributors, make sure you are not only adding the CSS files but also ensuring the font folders are included in the output.

  • Finally, clear your browser cache or do a hard refresh to ensure old/broken font files are not cached.

  This approach aligns with common ABP conventions, but specific official documentation for this exact scenario is not available.

  • Reference: ABP Global Assets - New way to bundle JavaScript/CSS files in Blazor WebAssembly app

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  Spospisil created one month ago

  Hi,

  In my solution's *.Blazor (wasm host) project I have the following which seems to be throwing off the http request to the fontawesome font-icon file '_content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/webfonts/fa-solid-900.ttf'. In most of the other requests to either .css and .js files the link is prefixed by the /Blazor tag and all those are retrieved just fine.

  app.UsePathBase("/Blazor");
  app.UseStaticFiles();
  app.UseRouting();
  

  

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  What is your abp packages version?

  app.UsePathBase("/Blazor");

  What is the reason you use this?

  We have used MapAbpStaticAssets to replace UseStaticFiles

  app.UsePathBase("/Blazor");
  app.UseStaticFiles();
  app.UseRouting();
  

  Can you share a project I can download and check it?

  liming.ma@volosoft.com Thanks

  Save Cancel
• 

  0

  Spospisil created one month ago

  [maliming] said: hi

  What is your abp packages version? As mentioned in the ticket parameters we are using 9.1.0

  app.UsePathBase("/Blazor");

  What is the reason you use this? We are using this because we will be hosting multiple blazor wasm apps on the same domain so we want to seperate them out with a subdomain if you will (structurecloud.com/Blazor, strucutrecloud/Maintenance, etc)

  We have used MapAbpStaticAssets to replace UseStaticFiles

  app.UsePathBase("/Blazor"); 
  app.UseStaticFiles(); 
  app.UseRouting(); 
  

  I have tried this and now the pipeline just ends

  [11:54:00 INF] Executing endpoint 'Microsoft.AspNetCore.Routing.RouteEndpoint' [11:54:00 INF] The file CFData.Structure.Blazor.Client.styles.css was not modified [11:54:00 INF] Executed endpoint 'Microsoft.AspNetCore.Routing.RouteEndpoint' [11:54:00 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/CFData.Structure.Blazor.Client.styles.css⁠ - 304 null text/css 0.6089ms [11:54:00 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.runtime.js.map⁠ - null null [11:54:00 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.js.map⁠ - null null [11:54:00 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.bundle.min.js.map;⁠ - null null [11:54:00 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.min.css.map⁠ - null null [11:54:00 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.bundle.min.js.map;⁠ - 404 0 null 348.2756ms [11:54:00 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.runtime.js.map⁠ - 404 0 null 348.4521ms [11:54:00 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.js.map⁠ - 404 0 null 348.4732ms [11:54:00 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.min.css.map⁠ - 404 0 null 286.0777ms [11:54:00 INF] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET http://localhost.structurecloud.com/Blazor/bootstrap.min.css.map,⁠ Response status code: 404 [11:54:00 INF] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET http://localhost.structurecloud.com/Blazor/bootstrap.bundle.min.js.map;,⁠ Response status code: 404 [11:54:00 INF] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.runtime.js.map,⁠ Response status code: 404 [11:54:00 INF] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.js.map,⁠ Response status code: 404

  Can you share a project I can download and check it?

  liming.ma@volosoft.com Thanks

  Save Cancel
• 

  0

  Spospisil created one month ago

  I've forked a repository on git and send you an invite to colloborate. The branch you want to use is feature/CurrentCompanyMiddleware

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  Ok, thanks, I will check your project.

  Save Cancel
• 

  0

  Spospisil created one month ago

  When I comment out the .UseStatic files and use .MapAppStaticAssets as you suggested, I get an error in the browser and the blazor wasm app does not run.

  app.UseHttpsRedirection();
  app.UsePathBase("/Blazor");
  //app.UseStaticFiles();
  app.UseRouting();
  app.MapAbpStaticAssets();
  app.UseAntiforgery();
  app.UseAbpSecurityHeaders();
  

  

  Save Cancel
• 

  0

  Spospisil created one month ago

  Any update?

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  The project icons are no problem.

  

  Save Cancel
• 

  0

  Spospisil created one month ago

  As you can see from my previous screenshot the _content folder in the url is not being prefixed with the /Blazor literal. Can you commit your code to the repo so I can take a look. That makes no sense why it would work for you and not me. You’re using the feature/CurrentCompanyMiddleware branch correct?

  

  When I use .MapAbpStaticAssets() instead of UseStaticFiles I get this error when I launch the blazor app and the last request that happens is appsettings.json

  [22:47:40 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.min.css.map⁠ - null null [22:47:40 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.bundle.min.js.map;⁠ - null null [22:47:40 INF] Request starting HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.js⁠ - null null [22:47:40 ERR] Connection id "0HNEDBUBJDLME", Request id "0HNEDBUBJDLME:00000002": An unhandled exception was thrown by the application. System.InvalidOperationException: The request reached the end of the pipeline without executing the endpoint: ''. Please register the EndpointMiddleware using 'IApplicationBuilder.UseEndpoints(...)' if using routing. at Microsoft.AspNetCore.Builder.ApplicationBuilder.<>c.<Build>b__25_0(HttpContext context) at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context) at Microsoft.AspNetCore.Components.WebAssembly.Server.ContentEncodingNegotiator.InvokeAsync(HttpContext context) at Microsoft.AspNetCore.Builder.ComponentsWebAssemblyApplicationBuilderExtensions.<>c__DisplayClass3_0.<<UseBlazorFrameworkFiles>b__2>d.MoveNext() --- End of stack trace from previous location --- at Microsoft.AspNetCore.Builder.Extensions.UsePathBaseMiddleware.InvokeCore(HttpContext context, PathString matchedPath, PathString remainingPath) at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context) at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context) at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application) [22:47:40 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/_framework/dotnet.js⁠ - 500 0 null 3.4968ms ****** Request Path: /bootstrap.min.css.map ****** Request Path: /bootstrap.bundle.min.js.map; [22:47:41 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.min.css.map⁠ - 404 0 null 356.8818ms [22:47:41 INF] Request finished HTTP/1.1 GET http://localhost.structurecloud.com/Blazor/bootstrap.bundle.min.js.map;⁠ - 404 0 null 334.6612ms [22:47:41 INF] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET http://localhost.structurecloud.com/Blazor/bootstrap.bundle.min.js.map;,⁠ Response status code: 404 [22:47:41 INF] Request reached the end of the middleware pipeline without being handled by application code. Request path: GET http://localhost.structurecloud.com/Blazor/bootstrap.min.css.map,⁠ Response status code: 404

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  I basically didn't modify the code, I just set up the testing environment.

  https://github.com/spospisil/StructureCloudTest/pull/1/files

  Save Cancel
• 

  0

  Spospisil created one month ago

  What was your testing environment? This solution is currently you configured to run in docker containers. How did you run it?

  So given all the screenshots and messages I provided you have no suggestions on what to try? I’ve spent all weekend trying to get this to work with no success!

  Save Cancel
• 

  0

  Spospisil created one month ago

  My concern here is that there is a bug in abp’s source where the mapabpstaticassets method does not work as intended in a containerized (docker) environment and if you ran it in a non containerized environment it’s not a true test

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  I changed some URLs and connection strings, then used the dotnet run command to start three apps.

  https://streamable.com/gqchxo

  MapAbpStaticAssets and UseStaticFiles cannot be used at the same time.

  

  ---

  How can I publish your apps to my local Docker environment? What are the steps

  Thanks.

  Save Cancel
• 

  0

  Spospisil created one month ago

  Hi,

  Assuming you have docker desktop installed/running it's just a matter of going to the root folder of the source code provided and typing the command: docker compose -f docker/docker-compose.yml up -d As stated previously when I use the .MapAbpStaticAssets vs UseStaticFiles I get the below error and the blazor app does not run. Previously I indicated we are running in containers which is the correct testing context for this.

  Is your build configuration set to Development or Production? I see in the MapAbpStaticAssets code that abp does different logic depending on which build configuration is being used.

  The other aspect here why we cannot use MapAbpStaticAssets is that upon startup we need to dynamically create an appsettings.json file dependent on variable values set by docker-compose.yml. Calling MapAbpStaticAssets seems to cause the issue mentioned above regarding the Blazor.Web.js file.

  That being said we just need to prefix the _content part of the the url for fa-solid-900.woff2 and bootstrap-icons.woff2 with /Blazor/_content and then I'll be all set. How can this be done as I see these files are in the global.css that gets produced somewhere within the abp framework.

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  We have such code for appsettings files if the app is running in a container. Can you try that?

  These code exist in latest studio template project

  app.UseRouting();
  var configuration = context.GetConfiguration();
  if (Convert.ToBoolean(configuration["AuthServer:IsOnK8s"]))
  {
      app.Use(async (context, next) =>
      {
          if (context.Request.Path.Value != null &&
              context.Request.Path.Value.StartsWith("/appsettings", StringComparison.OrdinalIgnoreCase) &&
              context.Request.Path.Value.EndsWith(".json", StringComparison.OrdinalIgnoreCase))
          {
              // Set endpoint to null so the static files middleware will handle the request.
              context.SetEndpoint(null);
          }
          await next(context);
      });
  
      app.UseStaticFilesForPatterns("appsettings*.json");
  }
  
  app.MapAbpStaticAssets();
  

  ---

  Docker compose failed

  

  Save Cancel
• 

  0

  Spospisil created one month ago

  It didn't work. At this point I'm not sure what I can do. I've given you the code to reproduce the issue and not sure why the docker deploy is not working for you. At this point I've now wasted a week of development time of something that should be so trivial (display fontawesome icons).

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  Hi

  Can you share these Docker images, I can run it directly without build.

  Thanks.

  Save Cancel
• 

  0

  Spospisil created one month ago

  Doesn't seem to be an easy task to upload the docker images. any other options?

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  Could you try creating a new template project with Studio? If it reproduces the problem, it will be easy for me to reproduce it on my end.

  Your project is too complex, with many runtime environments that need to be addressed, especially with Docker.

  Thanks.

  Save Cancel
• 

  0

  Spospisil created one month ago

  I’ve already tried recreating in a sample project and I suspect the issue isn’t the our code but rather something not working with Abp when running in a containerized environment and using the Setbasepath code.

  Would probably be easier if you created a project that is containerized (like our project is).

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  I’m not sure about the specific way you’re using the container. It would be best if you could share a template project and the steps. Once I can reproduce the problem, I’ll be able to identify the cause right away.

  Thanks.

  Save Cancel
• 

  0

  Spospisil created one month ago

  Ok,

  I am creating a different ticket for an error I have (briefly mentioned above) that is preventing me from using app.MapAbpStaticAssets which is why I think I cannot get the font awesome icons to display so if we solve this other ticket's issue I think this issue will be resolved as well.

  This is the new ticket I created

  https://abp.io/support/questions/9695/Error-when-Launching-Blazor-WASM

  Save Cancel
• 

  0

  Spospisil created one month ago

  Hi,

  Using the code below I can now run my project without error as it relates to the appsetttings file....but the font icons still do not show. the issue seems to be that the url specified in the css file for font-face..... is not being prefixed with /Blazor/_content.... but rather is just coming across as /_content.... The url links in the css files seem to be the only links not picking up the /Blazor prefix. All other related .css and .js files are being prefixed with the /Blazor literal.

  Why are the font awesome css urls different?

      // The trailing slash is important
      app.UsePathBase("/Blazor/"); // MUST be first to affect static and routing paths
  
      app.Use(async (context, next) =>
      {
          if (context.Request.Path.Value != null &&
              context.Request.Path.Value.StartsWith("/appsettings", StringComparison.OrdinalIgnoreCase))
          {
              // Set endpoint to null so the static files middleware will handle the request.
              context.SetEndpoint(null);
          }
  
          await next(context);
      });
  
      app.UseStaticFilesForPatterns("appsettings*.*");
      app.MapAbpStaticAssets();
  

  Save Cancel
• 

  0

  maliming created one month ago

  Support Team Fullstack Developer

  hi

  The app.UseRouting(); should be at the top.

  app.UseRouting();
  app.Use(async (context, next) =>
  {
      if (context.Request.Path.Value != null &&
          context.Request.Path.Value.StartsWith("/appsettings", StringComparison.OrdinalIgnoreCase) &&
          context.Request.Path.Value.EndsWith(".json", StringComparison.OrdinalIgnoreCase))
      {
          // Set endpoint to null so the static files middleware will handle the request.
          context.SetEndpoint(null);
      }
      await next(context);
  });
  
  app.UseStaticFilesForPatterns("appsettings*.json");
  app.MapAbpStaticAssets();
  

  ....but the font icons still do not show.

  What are the steps to reproduce the font icon problem with ABP_Issue?

  Thanks.

  Save Cancel