如何从节点模块使用字体可怕的图标

小开

你必须设置正确的字体路径。

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;
}

小开

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

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

或者不管你的 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.

小开

最佳答案

以 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.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})

小开

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

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

对于一些构建工具，有一些预先存在的字体很棒的软件包。

小开

将以下内容添加到 .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');

小开

With expressjs, public it:

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

小开

Using webpack and scss:

使用 npm (使用 https://fontawesome.com/how-to-use上的设置说明)安装 font-Awesome

npm install @fortawesome/fontawesome-free

接下来，使用 Copy-webpack-plugin 复制-网络包-插件，将字体文件夹从 node_modules复制到您的远离文件夹在您的 webpack 构建过程中

npm install copy-webpack-plugin

在 Webpack.config.js中，配置 Copy-webpack-plugin 复制-网络包-插件。注意: 默认的 webpack 4 dist 文件夹是“ dist”，因此我们将 webfonts 文件夹从 node _ module 复制到 dist 文件夹。

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


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

Lastly, in your 主控制系统 file, tell fontawesome where the 字体 folder has been copied to and import the SCSS files you want from Node _ module.

$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应用到 html 文档中希望使用 fontawome 图标的区域。

例子 :

 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)
}

小开

如果您正在使用 npm，您可以使用 Gulp.js 构建工具来从 SCSS 或 LESS 构建您的 Font Awesome 软件包。此示例将从 SCSS 编译代码。

在本地安装 Gulp.js v4，全局安装 CLI V2。
Install a plugin called 一口吞下去 using npm.

在公用文件夹中创建 main.scss 文件并使用以下代码:

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

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

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

小开

我发现这个问题也有类似的问题，我想我可以分享另一个解决方案:

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

首先，执行 this guide中的步骤:

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

小开

由于我当前正在学习 nodejs，因此也遇到了这个问题。我所做的就是，首先，使用 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">

而且效果很好！

小开

课程模组版本

Soon, using @import in sass will be depreciated. SASS modules 配置 works using @use instead.

@use "../node_modules/font-awesome/scss/font-awesome"  with (
$fa-font-path: "../icons"
);


.icon-user {
@extend .fa;
@extend .fa-user;
}