Question

我的问题是如何在我的Grunt项目中包含font-awesome？

我的Gruntfile中似乎相关的部分是：

        compass: {
            options: {
                sassDir: '/styles',
                cssDir: '.tmp/styles',
                imagesDir: '/images',
                javascriptsDir: '/scripts',
                fontsDir: '/styles/fonts',
                importPath: '/bower_components',
                relativeAssets: true
            },
            dist: {},
            server: {
                options: {
                    debugInfo: true
                }
            }
        },

PS我看到了：Yeoman, How to reference a bower package (font-awesome)? - ＆gt;他们谈论复制，但不显示Grunt代码。

PPS还有Why does Yeoman build without /styles/fonts? - 但它没有显示如何使用font-awesome中的字体（来自Bower）

Answer 1

您将使用grunt-contrib-copy复制图标库。

首先，你需要加载grunt-contrib-copy：

grunt.loadNpmTasks('grunt-contrib-copy');

之后，您将使用以下内容创建任务：

grunt.initConfig({
    // ...
    copy: {
        libraries: {
            files: [
                {
                    expand: true,
                    cwd: 'bower_components/fontawesome/fonts/',
                    src: ['**/*'],
                    dest: 'public/fonts/'
                }
            ]
        }
    }
    // ...
});

最后，如果使用默认任务，则需要在默认任务上调用它：

grunt.registerTask('default', ['copy:libraries']);

Answer 2

这里的答案是@ font-face。

这有很大帮助：entypo

另外，pictos.cc和fontsquirrel提供了使用@ font-face的提示。

如何在Grunt项目中包含字体真棒？

2 个答案: