Can't get font awesome icons to display

Question

Please, before closing as duplicate or bashing me take a look at what I've done.

I generated the project with the latest angular-fullstack generator, which included font-awesome. I tried adding this line into the main.html just to verify that the icons are showing but I'm getting just a rectangle with letters and numbers inside. This is the html I'm trying to see:

<i class="fa fa-camera-retro"></i> fa-lg

This is my app.css:

@import '~font-awesome/css/font-awesome.css';

/**
 *Font Awesome Fonts
 */

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

this is my package.json file:

"font-awesome": "^4.6.3",

This is my .htaccess file:

# Allow access from all domains for web fonts

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|svg)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

And the fonts have been extracted and placed in the Fonts directory like this:
/assets/fonts/font-awesome/
->FontAwesome.otf
->fontawesome-webfont.eot
->fontawesome-webfont.svg
->fontawesome-webfont.ttf
->fontawesome-webfont.woff
->fontawesome-webfont.woff2

Can anyone that has dealt with this issue before and done all that I did (specially if you have dealt with the mess that is the angular fullstack generator), help me?

Thanks in advance!

EDIT: This is the MIME types config:

# ##############################################################################
# # MIME TYPES AND ENCODING                                                    #
# ##############################################################################

# ------------------------------------------------------------------------------
# | Proper MIME types for all files                                            |
# ------------------------------------------------------------------------------

<IfModule mod_mime.c>

  # Audio
    AddType audio/mp4                                   m4a f4a f4b
    AddType audio/ogg                                   oga ogg

  # JavaScript
    # Normalize to standard type (it's sniffed in IE anyways):
    # http://tools.ietf.org/html/rfc4329#section-7.2
    AddType application/javascript                      js jsonp
    AddType application/json                            json

  # Video
    AddType video/mp4                                   mp4 m4v f4v f4p
    AddType video/ogg                                   ogv
    AddType video/webm                                  webm
    AddType video/x-flv                                 flv

  # Web fonts
    AddType application/font-woff                       woff
    AddType application/vnd.ms-fontobject               eot

    # Browsers usually ignore the font MIME types and sniff the content,
    # however, Chrome shows a warning if other MIME types are used for the
    # following fonts.
    AddType application/x-font-ttf                      ttc ttf
    AddType font/opentype                               otf

    # Make SVGZ fonts work on iPad:
    # https://twitter.com/FontSquirrel/status/14855840545
    AddType     image/svg+xml                           svg svgz
    AddEncoding gzip                                    svgz

  # Other
    AddType application/octet-stream                    safariextz
    AddType application/x-chrome-extension              crx
    AddType application/x-opera-extension               oex
    AddType application/x-shockwave-flash               swf
    AddType application/x-web-app-manifest+json         webapp
    AddType application/x-xpinstall                     xpi
    AddType application/xml                             atom rdf rss xml
    AddType image/webp                                  webp
    AddType image/x-icon                                ico
    AddType text/cache-manifest                         appcache manifest
    AddType text/vtt                                    vtt
    AddType text/x-component                            htc
    AddType text/x-vcard                                vcf

</IfModule>

Might need to map some of those MIME types - are you seeing 404 errors in the developer console? — Tieson T., Sep 27 '16 at 03:13
Not at all, let me show you the MIME types, forgot to add that. This is on firefox, BTW. — Francisco Farías, Sep 27 '16 at 03:14
It shouldn't matter, but the querystring values are off; ?v=4.1.0 should be ?v=4.6.3 — Tieson T., Sep 27 '16 at 03:17
Also, can you check if a CDN version displays properly? https://www.bootstrapcdn.com/fontawesome/ — Tieson T., Sep 27 '16 at 03:18
Should also make sure WOFF2 is mapped (it's not in your config, as shown): http://stackoverflow.com/questions/28235550/proper-mime-type-for-woff2-fonts — Tieson T., Sep 27 '16 at 03:20
CDN works, Mapping woff2 didn't help. Tried Chrome and it worked. Is this a browser issue? — Francisco Farías, Sep 27 '16 at 03:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124254/discussion-between-tieson-t-and-francisco-farias). — Tieson T., Sep 27 '16 at 03:36
Is the browser's dev-console reporting any problems loading files? Also, I have no idea about the Angular-Environment, but usually stuff like @font-face-declarations in the .CSS are not required - can u try to remove these? — MBaas, Sep 28 '16 at 13:17
I tried removing the declarations from the .css, yes. I did nothing. — Francisco Farías, Sep 28 '16 at 20:56

Can't get font awesome icons to display

0 Answers0