请在关闭之前重复或抨击我,看看我做了什么。
我使用最新的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>