[英]Font-awesome not working with yeoman generator pushed to Heroku
I'm using the Yeoman generator "angular-fullstack". 我正在使用Yeoman发电机“angular-fullstack”。 With a freshly generated "angular-fullstack" scaffold, I perform a
bower install --save components-font-awesome
then add in a font-awesome icon to the main.html template, build and push it up to heroku, and I see a grey box where the icon should be. 使用新生成的“angular-fullstack”脚手架,我执行
bower install --save components-font-awesome
然后在main.html模板中添加一个字体 - 真棒图标,构建并将其推送到heroku,我看到一个灰色框,图标应该是。
However, if I perform a grunt serve
locally, I can see the icon as I expect. 但是,如果我在本地执行
grunt serve
,我可以看到我期望的图标。
I don't know if this is a Yeoman Angular-fullstack issue, grunt issue, font-awesome issue or Heroku issue so I'm throwing it out there. 我不知道这是一个Yeoman Angular-fullstack问题,grunt问题,字体真棒问题还是Heroku问题所以我把它扔出去了。 Maybe someone can help limit this down.
也许有人可以帮助限制这一点。
Note : I'm using "components-font-awesome" instead of "font-awesome" because grunt won't build font-awesome correctly so it was advised to use the shim. 注意 :我使用“components-font-awesome”而不是“font-awesome”,因为grunt不能正确构建字体,所以建议使用垫片。
What I see when served locally: 我在本地服务时看到的内容:
What I see when built and pushed to heroku: 我在构建并推送到heroku时看到的内容:
In this version of the Yeoman angular-fullstack generator, the grunt build
command builds the delivered files under the dist
directory. 在这个版本的Yeoman angular-fullstack生成器中,
grunt build
命令在dist
目录下构建交付的文件。 The other stackoverflow answer (that was referenced in the comments above) hinted to put the font-awesome fonts
directory directly under the dist
level. 另一个stackoverflow答案(在上面的评论中引用)暗示将字体 - 真棒
fonts
目录直接放在dist
级别下。 However, the served files are under dist/public
. 但是,提供的文件在
dist/public
。 Therefore, it's under the public
directory where the fonts
directory currently exists and the font-awesome font files should be placed. 因此,它位于当前存在
fonts
目录的public
目录下,并且应该放置字体真棒字体文件。
To make this work with the existing grunt build
, I pre-copied the font-awesome font files into the app/fonts
directory. 为了使用现有的
grunt build
,我将font-awesome字体文件预先复制到app/fonts
目录中。 This way, the grunt build
automatically copies the files into the dist/public/fonts
directory. 这样,
grunt build
自动将文件复制到dist/public/fonts
目录中。
To complement the accepted answer, here is the way to go: 为了补充已接受的答案,以下是要走的路:
Add the following to Gruntfile.js
in the copy.dist.files
section: 以下内容添加到
Gruntfile.js
在copy.dist.files
部分:
{
expand: true,
cwd: '<%= yeoman.app %>/bower_components/font-awesome',
src: 'fonts/*',
dest: '<%= yeoman.dist %>'
}
I created a distinct answer as suggested by other comments. 我根据其他评论的建议创建了一个独特的答案。
Christophe's version didn't work for me. 克里斯托夫的版本对我不起作用。
This worked for me: 这对我有用:
{
expand: true,
cwd: 'bower_components/font-awesome',
src: 'fonts/*',
dest: '<%= yeoman.dist %>'
}
This is what worked for me: 这对我有用:
If install font-awesome via bower, open "bower_components/font-awesome/bower.json" and find the following block of code: 如果通过bower安装font-awesome,请打开“bower_components / font-awesome / bower.json”并找到以下代码块:
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss"
],
Add the CSS to this "main" node array: 将CSS添加到此“主”节点数组:
"main": [
"less/font-awesome.less",
"scss/font-awesome.scss",
"css/font-awesome.css"
],
Start your server, or stop/start if it's already running, and font-awesome css 'should' now be injected. 启动你的服务器,或者如果它已经运行则停止/启动,并且现在应该注入font-awesome css'should'。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.