title: Why can't I get font awesome to work in an ASP.NET Core MVC application?
body: <p>I am having an issue adding font awesome to my ASP.NET Core MVC (ASP.NET Core 2) application. I am simply trying to add the CSS library called font awesome to my MVC project. I have tried two approaches</p>
  
  <p>1) Adding the font awesome CDN like so</p>
  
  <pre><code>&lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;
  </code></pre>
  
  <p>but when I add the CDN I get the CSP errors in Chrome</p>
  
  <blockquote>
    <p>Refused to load the stylesheet
    '<a href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="nofollow noreferrer">http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css</a>'
    because it violates the following Content Security Policy directive:
    "default-src 'self'". Note that 'style-src' was not explicitly set, so
    'default-src' is used as a fallback.</p>
  </blockquote>
  
  <p>So I tried adding the correct meta tags. I tried MANY combinations and nothing seemed to work. For example,</p>
  
  <pre><code>&lt;meta http-equiv="Content-Security-Policy"
    content="script-src 'self' http://maxcdn.bootstrapcdn.com
    'unsafe-inline' 'unsafe-eval';
    style-src 'self' http://maxcdn.bootstrapcdn.com
    'unsafe-inline' 'unsafe-eval'; " /&gt;
  </code></pre>
  
  <p>I was still getting errors related to CSP in Chrome.</p>
  
  <p>2) The second approach I took was to add the font awesome CSS file in my project. I did this and then added the corresponding reference like so:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="~/css/font-awesome.min.css"&gt;
  </code></pre>
  
  <p>When I did this I got the following errors despite the file being in the correct location and being referenced correctly:</p>
  
  <pre><code>GET http://localhost:5000/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
  GET http://localhost:5000/fonts/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
  GET http://localhost:5000/fonts/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)
  </code></pre>
  
  <p>I looked into this issue and found that it could be related to the static file handler. I then modified the <code>app.UseStaticFiles()</code> to take an options parameter like this:</p>
  
  <pre><code>StaticFileOptions staticFileOptions = new StaticFileOptions();
  FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
  if (!typeProvider.Mappings.ContainsKey(".woff2"))
  {
      typeProvider.Mappings.Add(".woff2", "application/font-woff2");
  }
  
  if (!typeProvider.Mappings.ContainsKey(".woff"))
  {
      typeProvider.Mappings.Add(".woff", "application/font-woff");
  }
  
  if (!typeProvider.Mappings.ContainsKey(".ttf"))
  {
      typeProvider.Mappings.Add(".ttf", "application/font-ttf");
  }
  staticFileOptions.ContentTypeProvider = typeProvider;
  app.UseStaticFiles(staticFileOptions);
  </code></pre>
  
  <p>But I still got the error above.</p>
  
  <p>Does anyone know what I am doing wrong? I can add font awesome through its CDN or add the font awesome CSS file in my application if need be.</p>