如何使用节点模块中的字体超赞图标

111

我已经使用安装了真棒字体4.0.3图标npm install。

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

如果需要编辑less文件，是否需要在节点模块中进行编辑？

css  node.js  less  npm  font-awesome 
— 戈万
source
您是否曾经找到执行此操作的“正确”方法？我目前仅使用gulp任务将东西从node_modules复制到我的公共目录中。
— sjmeverett 2014年
后来我将其用作凉亭组件...
— Govan 2014年

Answers:

106

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

在较少开发的文件中，您可以使用来导入不太出色的整个字体@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";

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

您还需要从一个名为的文件夹中提供字体本身/fonts/在公共目录中。您可以使用简单的gulp任务将其复制到此处，例如：

gulp.task('fonts', function() {
  return gulp.src('node_modules/font-awesome/fonts/*')
    .pipe(gulp.dest('public/fonts'))
})
— 凯文·卡莫迪
source
9
还需要强调的是，字体也需要放到fonts文件夹中……我可能花了一个小时试图弄清楚这个简单的小事情。
— Alex J
3
您还可以通过将变量设置fa-font-path到所需的位置来调整字体静态路径。
— zusatzstoff
在上面的示例中，您需要在导入较少的内容之后进行以下覆盖，以便在部署后可以找到由@fa-font-path: "/public/fonts";
— gulp
56

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

my-style.scss

$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
  @extend .fa;
  @extend .fa-user;
}
— 安德烈亚斯·弗里斯
source
3
sass也一样。路径../assets/font-awesome/fonts对我有用。谢谢。
— 安德烈
16

在我的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');
— 肯
source
12

在构建过程中，您将需要复制文件。例如，您可以使用npm postinstall脚本将文件复制到正确的目录：

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

对于某些构建工具，有预先存在的字体棒软件包。例如，webpack具有font-awesome-webpack，它使您变得简单require('font-awesome-webpack')。

— 威尔弗雷德·休斯
source
11

使用webpack和scss：

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

npm install @fortawesome/fontawesome-free

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

npm install copy-webpack-plugin

在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'}
        ])
    ]
}

最后，在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`

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

范例：

 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)
    }
— 凉亭
source
1
对我来说效果很好，我只需要调整从@import "../node_modules/[...]"到的路径@import "@/../node_modules/[...]"
— mecograph '19
您可以将别名添加到webpack.config.js：resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}然后@import "node_modules/[...]
— Steven Almeroth
8

使用expressjs，将其公开：

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

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

— 金普罗什
source
FontAwesome建议将其npm软件包安装为devDependency。为了使该解决方案有效（在生产中），应将软件包作为常规依赖项安装吗？
— John J. Camilleri
1
要回答我自己的问题：是的，它需要安装--save而不是--save-dev
— John J. Camilleri
5

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

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

或随便你走什么路 node_modules。

编辑（2017-06-26）-免责声明：有更好的答案。请不要使用这种方法。在提出最初的答案时，好的工具并不普遍。使用当前的构建工具（例如webpack或browserify），使用此答案可能没有任何意义。我可以删除它，但是我认为重要的是要强调一个选项所具有的各种选择以及可能的有无。

— 康·安托纳科斯（Con Antonakos）
source
16
我认为没有人愿意在构建中包含node_modules目录并直接引用它。
— Fabian Leutgeb '16
5
我了解，但这仍然是一种选择。解决方案没有一个答案。:)如果您有捆绑系统，那么您可以@import '../node_modules/...'像其他答案一样指出。
— Con Antonakos
1
与其他答案相比，我觉得这是最好的。您仍在其他答案中通过node_modules引用相对路径。如果font-awesome要更改其中的css文件的位置，则与其他答案一样，需要进行调整或维护。区别在于此答案不需要翻译或任务。它只是将导入准确地放在了预期的位置；在<link>标签中。
— 北美'16
3
一个简单的npm forder至少要有10 + MB，任何用户都不会出于任何原因将重量增加到项目中。npm的全部目的是在开发时提供帮助，并在构建后最小化/减小生产规模。即使有效，也不要认为这是一个好选择。; ）
— T04435 '17
我添加了以下免责声明：在提出原始答案时，好的工具并不普遍。使用当前的构建工具（例如webpack或browserify），使用此答案可能没有任何意义。我可以删除它，但是我认为重要的是要强调一个选项的各种选择以及可能要做的和不要做的。
— Con Antonakos
3

由于我目前正在学习node js，因此我也遇到了这个问题。我所做的就是，首先，使用npm安装真棒字体

npm install font-awesome --save-dev

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

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

并在html中：

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

而且效果很好！

— 阿尔文桑威奇
source
2

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

  1. 在本地安装Gulp.js v4，在全局安装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”并观看魔术。

— 瑞安
source
0

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

如果要创建Javascript应用程序，则还可以直接通过Javascript来引用字体真棒图标：

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

npm install @fortawesome/fontawesome-svg-core

然后在您的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' })

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

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

您还可以通过以下方式访问代表图标的HTML字符串：

fontIcon.html
— r
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.