【发布时间】：2014-07-01 08:00:16
【问题描述】：
我正在尝试在我的 jekyll 项目中使用 FontAwesome。我使用 yeoman (generator-jekyllrb) 生成了它，我使用的是 Grunt 和 Bower。我使用 bower: bower install fontawesome 安装了字体，它已经安装在我的 app/_bower_components 目录中。我的问题是如何访问它？这是app/_bower_components/fontawesome 目录中的内容：
fontawesome
├── css
│ ├── font-awesome.css
│ └── font-awesome.min.css
├── fonts
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ └── fontawesome-webfont.woff
├── less
│ └── ...
└── scss
└── ...
在app/_bower_components/fontawesome/css/font-awesome.css 我有这个：
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
在我的 html 文件中，我有这个：
<!-- build:css({app,.tmp}) /css/main.css -->
<!-- Syntax highlighting CSS -->
<link rel="stylesheet" href="/_bower_components/fontawesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/syntax.css">
<link rel="stylesheet" href="/css/main.css">
<!-- endbuild -->
当我在本地尝试时，一切正常，但是，当我将它构建到静态站点时，我得到 404 not found 因为没有目录 fonts（grunt 将所有 .css 文件缩小并合并为一个，并且没有t 用字体本身制作fonts 目录）：
dist
├── 404.html
├── css
│ └── main.0df9.css
├── img
│ └── okay.d42b.png
├── index.html
├── jekyll
│ └── update
│ └── 2014
│ └── 06
│ └── 16
│ ├── test-first-post.html
│ ├── welcome-to-jekyll.html
│ └── yo-jekyllrb.html
├── js
│ └── scripts.472f.js
└── search.json
如果我将字体文件复制到我的app/fonts（我认为这不是最好的方法），它也不起作用，因为 grunt 更改了它们的名称。那么，我该怎么办？
如果您需要，这是我的Gruntfile。
我还尝试将 fontawesome 目录添加到我的 Gruntfile（第 270 行）：
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
src: [
// Jekyll processes and moves HTML and text files.
// Usemin moves CSS and javascript inside of Usemin blocks.
// Copy moves asset files and directories.
'img/**/*',
'fonts/**/*',
// Like Jekyll, exclude files & folders prefixed with an underscore.
'!**/_*{,/**}',
// Explicitly add any files your site needs for distribution here.
// '_bower_components/jquery/jquery.js',
//'favicon.ico',
//'apple-touch*.png'
],
dest: '<%= yeoman.dist %>'
}]
},
它工作得非常好，它会生成一个可以工作的静态站点，但是当我部署它时（我正在使用 GitHub Pages）它只是在 _bower_components 目录中找不到任何东西。
【问题讨论】：