如何在Grunt项目中引入Font Awesome字体图标？

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，如何引用bower软件包（font-awesome）？ 他们谈论复制，但没有显示Grunt代码。

PPS还有为什么Yeoman构建时没有/styles/fonts？ - 但它不显示如何使用来自Bower的font-awesome字体。

- poseid

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']);

- rneves

Answer 2

这里的答案是@font-face。

这对我很有帮助：entypo

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

- poseid