CSS 如何使用节点模块中的字体很棒的图标

How to use font-awesome icons from node-modules

提问by Govan

I have installed font-awesome 4.0.3 icons using npm install.

我已经使用npm install.

If I need to use it from node-modules how should I use it in html file?

如果我需要从节点模块使用它，我应该如何在 html 文件中使用它？

If I need to edit the less file do I need to edit it in node-modules?

如果我需要编辑 less 文件，我需要在节点模块中编辑它吗？

采纳答案by Kevin Carmody

Install as npm install font-awesome --save-dev

安装为 npm install font-awesome --save-dev

In your development less file, you can either import the whole font awesome less using @import "node_modules/font-awesome/less/font-awesome.less", or look in that file and import just the components that you need. I think this is the minimum for basic icons:

在您的开发较少文件中，您可以使用 导入整个字体 awesome less @import "node_modules/font-awesome/less/font-awesome.less"，或者查看该文件并仅导入您需要的组件。我认为这是基本图标的最低要求：

/* adjust path as needed */
@fa_path: "../node_modules/font-awesome/less";
@import "@{fa_path}/variables.less";
@import "@{fa_path}/mixins.less";
@import "@{fa_path}/path.less";
@import "@{fa_path}/core.less";
@import "@{fa_path}/icons.less";

As a note, you still aren't going to save that many bytes by doing this. Either way, you're going to end up including between 2-3k lines of unminified CSS.

请注意，您仍然不会通过这样做来节省那么多字节。无论哪种方式，您最终都会包含 2-3k 行未缩小的 CSS。

You'll also need to serve the fonts themselves from a folder called/fonts/in your public directory. You could just copy them there with a simple gulp task, for example:

您还需要从/fonts/公共目录中调用的文件夹中提供字体本身。您可以使用简单的 gulp 任务将它们复制到那里，例如：

gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})

回答by Andreas Frische

You have to set the proper font path. e.g.

您必须设置正确的字体路径。例如

my-style.scss

我的样式.scss

$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}

回答by Ken

In my style.css file

在我的 style.css 文件中

/* You can add global styles to this file, and also import other style files */

@import url('../node_modules/font-awesome/css/font-awesome.min.css');

回答by Wilfred Hughes

You will need to copy the files as part of your build process. For example, you can use a npm postinstallscript to copy the files to the correct directory:

作为构建过程的一部分，您需要复制这些文件。例如，您可以使用npm postinstall脚本将文件复制到正确的目录：

"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"

For some build tools, there are preexisting font-awesome packages. For example, webpack has font-awesome-webpackwhich lets you simple require('font-awesome-webpack').

对于某些构建工具，有预先存在的 font-awesome 包。例如，webpack 有font-awesome-webpack可以让你简单的require('font-awesome-webpack').

回答by pppglowacki

Using webpack and scss:

使用 webpack 和 scss：

Install font-awesome using npm (using the setup instructions on https://fontawesome.com/how-to-use)

使用 npm 安装 font-awesome（使用https://fontawesome.com/how-to-use上的设置说明）

npm install @fortawesome/fontawesome-free

Next, using the copy-webpack-plugin, copy the webfontsfolder from node_modulesto your distfolder during your webpack build process. (https://github.com/webpack-contrib/copy-webpack-plugin)

接下来，在 webpack 构建过程中，使用copy-webpack-plugin将webfonts文件夹从node_modules复制到dist文件夹中。( https://github.com/webpack-contrib/copy-webpack-plugin)

npm install copy-webpack-plugin

In webpack.config.js, configure copy-webpack-plugin. NOTE: The default webpack 4 dist folder is "dist", so we are copying the webfonts folder from node_modules to the dist folder.

在webpack.config.js 中，配置copy-webpack-plugin。注意：默认的 webpack 4 dist 文件夹是“dist”，所以我们将 webfonts 文件夹从 node_modules 复制到 dist 文件夹。

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            { from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
        ])
    ]
}

Lastly, in your main.scssfile, tell fontawesome where the webfontsfolder has been copied to and import the SCSS files you want from node_modules.

最后，在您的main.scss文件中，告诉 fontawesome webfonts文件夹已复制到的位置并从node_modules导入您想要的 SCSS 文件。

$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/v4-shims"; // if you also want to use `fa v4`  like: `fa fa-address-book-o` 

and apply the following font-familyto a desired region(s) in your html document where you want to use the fontawesome icons.

并将以下内容应用于font-familyhtml 文档中要使用 fontawesome 图标的所需区域。

Example:

示例：

 body {
      font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
      // font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
    }

回答by Kimprosh

With expressjs, public it:

使用 expressjs，公开它：

app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));

And you can see it at: yourdomain.com/stylesheets/fontawesome/css/all.min.css

你可以在以下位置看到它： yourdomain.com/stylesheets/fontawesome/css/all.min.css

回答by Con Antonakos

You could add it between your <head></head>tag like so:

你可以<head></head>像这样在你的标签之间添加它：

<head>
  <link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>

Or whatever your path to your node_modulesis.

或者无论你的道路node_modules是什么。

Edit (2017-06-26) - Disclaimer: THERE ARE BETTER ANSWERS. PLEASE DO NOT USE THIS METHOD. At the time of this original answer, good tools weren't as prevalent. With current build tools such as webpack or browserify, it probably doesn't make sense to use this answer. I can delete it, but I think it's important to highlight the various options one has and the possible dos and do nots.

编辑 (2017-06-26) - 免责声明：有更好的答案。请不要使用这种方法。在这个原始答案的时候，好的工具还没有那么普遍。使用当前的构建工具（例如 webpack 或 browserify），使用此答案可能没有意义。我可以删除它，但我认为突出显示一个人拥有的各种选项以及可能的注意事项很重要。

回答by alvinsandwich

Since I'm currently learning node js, I also encountered this problem. All I did was, first of all, install the font-awesome using npm

由于我目前正在学习node js，所以也遇到了这个问题。我所做的就是，首先，使用 npm 安装 font-awesome

npm install font-awesome --save-dev

after that, I set a static folder for the css and fonts:

之后，我为 css 和字体设置了一个静态文件夹：

app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));

and in html:

并在 html 中：

<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">

and it works fine!

它工作正常！

回答by Ryan

If you're using npm you could use Gulp.js a build tool to build your Font Awesome packages from SCSS or LESS. This example will compile the code from SCSS.

如果你使用 npm，你可以使用 Gulp.js 一个构建工具从 SCSS 或 LESS 构建你的 Font Awesome 包。此示例将从 SCSS 编译代码。

1. Install Gulp.js v4 locally and CLI V2 globally.

2. Install a plugin called gulp-sassusing npm.

3. Create a main.scss file in your public folder and use this code:

   $fa-font-path: "../webfonts";
   @import "fontawesome/fontawesome";
   @import "fontawesome/brands";
   @import "fontawesome/regular";
   @import "fontawesome/solid";
   @import "fontawesome/v4-shims";
   

4. Create a gulpfile.js in your app directory and copy this.

   const { src, dest, series, parallel } = require('gulp');
   const sass = require('gulp-sass');
   const fs = require('fs');
   
   function copyFontAwesomeSCSS() {
      return src('node_modules/@fortawesome/fontawesome-free/scss/*.scss')
        .pipe(dest('public/scss/fontawesome'));
   }
   
   function copyFontAwesomeFonts() {
      return src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(dest('public/dist/webfonts'));
    }
   
    function compileSCSS() { 
      return src('./public/scss/theme.scss')
        .pipe(sass()).pipe(dest('public/css'));
    }
   
    // Series completes tasks sequentially and parallel completes them asynchronously
    exports.build = parallel(
      copyFontAwesomeFonts,
      series(copyFontAwesomeSCSS, compileSCSS)
    );
   

5. Run 'gulp build' in your command line and watch the magic.

1. 在本地安装Gulp.jsv4，在全局安装CLI V2。

2. 使用 npm安装一个名为gulp-sass的插件。

3. 在您的公共文件夹中创建一个 main.scss 文件并使用以下代码：

   $fa-font-path: "../webfonts";
   @import "fontawesome/fontawesome";
   @import "fontawesome/brands";
   @import "fontawesome/regular";
   @import "fontawesome/solid";
   @import "fontawesome/v4-shims";
   

4. 在您的应用程序目录中创建一个 gulpfile.js 并复制它。

   const { src, dest, series, parallel } = require('gulp');
   const sass = require('gulp-sass');
   const fs = require('fs');
   
   function copyFontAwesomeSCSS() {
      return src('node_modules/@fortawesome/fontawesome-free/scss/*.scss')
        .pipe(dest('public/scss/fontawesome'));
   }
   
   function copyFontAwesomeFonts() {
      return src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
        .pipe(dest('public/dist/webfonts'));
    }
   
    function compileSCSS() { 
      return src('./public/scss/theme.scss')
        .pipe(sass()).pipe(dest('public/css'));
    }
   
    // Series completes tasks sequentially and parallel completes them asynchronously
    exports.build = parallel(
      copyFontAwesomeFonts,
      series(copyFontAwesomeSCSS, compileSCSS)
    );
   

5. 在命令行中运行“gulp build”并观看魔术。

回答by jrook

I came upon this question having a similar problem and thought I would share another solution:

我遇到了这个有类似问题的问题，并认为我会分享另一个解决方案：

If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:

如果你正在创建一个 Javascript 应用程序，也可以通过 Javascript 直接引用字体真棒图标：

First, do the steps in this guide:

首先，执行本指南中的步骤：

npm install @fortawesome/fontawesome-svg-core

Then inside your javascript:

然后在你的 javascript 中：

import { library, icon } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons'

library.add(faStroopwafel)

const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })

After the above steps, you can insert the icon inside an HTML node with:

完成上述步骤后，您可以使用以下命令将图标插入 HTML 节点中：

htmlNode.appendChild(fontIcon.node[0]);

You can also access the HTML string representing the icon with:

您还可以访问表示图标的 HTML 字符串：

fontIcon.html