无法获得要显示的字体真棒图标

时间:2016-09-27 03:12:04

标签: css font-awesome angular-fullstack

请在关闭之前重复或抨击我,看看我做了什么。

我使用最新的angular-fullstack生成器生成了项目,其中包括font-awesome。我尝试将此行添加到main.html只是为了验证图标是否正在显示,但我只是在里面找到一个带字母和数字的矩形。这是我试图看到的HTML:

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

这是我的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;
}

这是我的package.json文件:

"font-awesome": "^4.6.3",

这是我的.htaccess文件:

# 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>

字体已被提取并放置在Fonts目录中,如下所示:
/assets/fonts/font-awesome/
    - &GT; FontAwesome.otf
    - &GT; fontawesome-webfont.eot
    - &GT; fontawesome-webfont.svg
    - &GT; fontawesome-webfont.ttf
    - &GT; fontawesome-webfont.woff
    - &gt; fontawesome-webfont.woff2

任何处理过这个问题的人都能完成我所做的一切(特别是如果你已经处理了角度全栈发生器的混乱),请帮帮我吗?

提前致谢!

编辑:这是MIME类型配置:

# ##############################################################################
# # 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>

0 个答案:

没有答案