entityMap|blocks|key|5u4hh|text|安装方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|d2ai|在你的开发少文件中，你可以使用导入整个字体|2iqlk|，或者查看该文件并只导入所需的组件。我认为这是基本图标的最低要求：|79ugc|/*+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";|code-block|syntax|javascript|btvl7|需要注意的是，这样做仍然不会节省那么多字节。无论哪种方式，你最终都会包含2-3k行的未压缩CSS。|40joq|您还需要从一个名为的文件夹中提供字体本身|8dbvg|在您的公共目录中。您可以通过一个简单的吞咽任务将它们复制到那里，例如：|cgohu|gulp.task('fonts',+function()+{
++return+gulp.src('node_modules/font-awesome/fonts/*')
++++.pipe(gulp.dest('public/fonts'))
})^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|W|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|I|8|10|9|@]|A|@]|B|$J|K]]]]

Install as <code>npm install font-awesome --save-dev</code>

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

<pre><code>/* 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";
</code></pre>

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.

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

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

entityMap|blocks|key|13ctd|text|您必须设置正确的字体路径。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6007u|my-style.scss|asnq4|$fa-font-path:"../node_modules/font-awesome/fonts";
@import+"../node_modules/font-awesome/scss/font-awesome";
.icon-user+{
++@extend+.fa;
++@extend+.fa-user;
}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

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

<h3>my-style.scss</h3>

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

entityMap|blocks|key|fah4t|text|将以下内容添加到您的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|93u0r|样式表。|djbk|/*+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');|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

Add the below to your <code>.css</code> stylesheet.
<pre><code>/* 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');
</code></pre>

entityMap|blocks|key|nqft|text|作为构建过程的一部分，您需要复制这些文件。例如，您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2tv7j|将文件复制到正确目录的脚本：|9cncs|"postinstall":+"cp+-R+node_modules/font-awesome/fonts+./public/"|code-block|syntax|javascript|861mb|对于一些构建工具，有一些预先存在的字体令人敬畏的包。例如，webpack有|91osa|font-awesome+webpack|5rrq3|这使您可以简单地|c99gi|..。^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|T|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|U|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|V|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|W|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|X|9|@]|A|@]|B|$]]]]

You will need to copy the files as part of your build process. For example, you can use a <code>npm postinstall</code> script to copy the files to the correct directory:

<pre class="lang-json prettyprint-override"><code>"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
</code></pre>

For some build tools, there are preexisting font-awesome packages. For example, webpack has <a href="https://www.npmjs.com/package/font-awesome-webpack" rel="noreferrer">font-awesome-webpack</a> which lets you simple <code>require('font-awesome-webpack')</code>.

entityMap|blocks|key|2ctcu|text|使用webpack和scss：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dct|使用npm安装font-font(使用上的安装说明|2vi26|https://fontawesome.com/how-to-use|10mgk|)|f8q2h|npm+install+@fortawesome/fontawesome-free|code-block|syntax|javascript|ed8ct|接下来，使用|fp40u|复制-webpack-plugin|6rtb1|，复制|dikg7|webfonts|lpc2|文件夹来自|35ces|节点|8ma4s|_|6v0mf|模块|5nvqi|致您的|qtb5|距离|eagvo|在您的webpack构建过程中。(|5ckqr|https://github.com/webpack-contrib/copy-webpack-plugin|3n2tv|60io3|npm+install+copy-webpack-plugin|2uvgj|在|ccinf|webpack.config.js|3577p|，配置|a2m6r|e7egp|..。注意:默认的webpack+4+dist文件夹是"dist"，所以我们从node复制webfonts文件夹|5q02a|7bj6e|模块添加到dist文件夹。|ahufv|const+CopyWebpackPlugin+=+require('copy-webpack-plugin');

module.exports+=+{
++++plugins:+[
++++++++new+CopyWebpackPlugin([
++++++++++++{+from:+'./node_modules/@fortawesome/fontawesome-free/webfonts',+to:+'./webfonts'}
++++++++])
++++]
}|f9228|最后，在你的|avgsj|main.scss|an3gp|文件，告诉fontawesome文件在哪里|e4asd|4gu0r|文件夹已复制到并导入所需的SCSS文件|8eime|a755q|2gaj3|a41ub|..。|1qkui|$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`|6g15a|并应用以下内容|fcikq|到html文档中想要使用字体图标的所需区域。|800c0|示例|6hujs|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)
++++}^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|2G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|2H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|2I|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|2J|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|2K|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|2L|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|2M|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|2N|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|2O|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|2P|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|2Q|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|2R|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|2S|9|@]|A|@]|B|$]]|$2|13|4|14|6|7|8|2T|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|2U|9|@]|A|@]|B|$]]|$2|17|4|18|6|7|8|2V|9|@]|A|@]|B|$]]|$2|19|4|1A|6|7|8|2W|9|@]|A|@]|B|$]]|$2|1B|4|H|6|7|8|2X|9|@]|A|@]|B|$]]|$2|1C|4|1D|6|K|8|2Y|9|@]|A|@]|B|$L|M]]|$2|1E|4|1F|6|7|8|2Z|9|@]|A|@]|B|$]]|$2|1G|4|1H|6|7|8|30|9|@]|A|@]|B|$]]|$2|1I|4|1J|6|7|8|31|9|@]|A|@]|B|$]]|$2|1K|4|Q|6|7|8|32|9|@]|A|@]|B|$]]|$2|1L|4|1M|6|7|8|33|9|@]|A|@]|B|$]]|$2|1N|4|10|6|7|8|34|9|@]|A|@]|B|$]]|$2|1O|4|1P|6|7|8|35|9|@]|A|@]|B|$]]|$2|1Q|4|1R|6|K|8|36|9|@]|A|@]|B|$L|M]]|$2|1S|4|1T|6|7|8|37|9|@]|A|@]|B|$]]|$2|1U|4|1V|6|7|8|38|9|@]|A|@]|B|$]]|$2|1W|4|1X|6|7|8|39|9|@]|A|@]|B|$]]|$2|1Y|4|U|6|7|8|3A|9|@]|A|@]|B|$]]|$2|1Z|4|20|6|7|8|3B|9|@]|A|@]|B|$]]|$2|21|4|Y|6|7|8|3C|9|@]|A|@]|B|$]]|$2|22|4|10|6|7|8|3D|9|@]|A|@]|B|$]]|$2|23|4|12|6|7|8|3E|9|@]|A|@]|B|$]]|$2|24|4|25|6|7|8|3F|9|@]|A|@]|B|$]]|$2|26|4|27|6|K|8|3G|9|@]|A|@]|B|$L|M]]|$2|28|4|29|6|7|8|3H|9|@]|A|@]|B|$]]|$2|2A|4|2B|6|7|8|3I|9|@]|A|@]|B|$]]|$2|2C|4|2D|6|7|8|3J|9|@]|A|@]|B|$]]|$2|2E|4|2F|6|K|8|3K|9|@]|A|@]|B|$L|M]]]]

Using webpack and scss:

Install font-awesome using npm (using the setup instructions on <a href="https://fontawesome.com/how-to-use" rel="noreferrer">https://fontawesome.com/how-to-use</a>)

<pre><code>npm install @fortawesome/fontawesome-free
</code></pre>

Next, using the copy-webpack-plugin, copy the webfonts folder from node_modules to your dist folder during your webpack build process. (<a href="https://github.com/webpack-contrib/copy-webpack-plugin" rel="noreferrer">https://github.com/webpack-contrib/copy-webpack-plugin</a>)

<pre><code>npm install copy-webpack-plugin
</code></pre>

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.

<pre><code>const CopyWebpackPlugin = require('copy-webpack-plugin');

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

Lastly, in your main.scss file, tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from node_modules.

<pre><code>$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` 
</code></pre>

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

Example:

<pre><code> 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)
 }
</code></pre>

entityMap|blocks|key|4g251|text|使用expressjs，公开它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fo5bf|app.use('/stylesheets/fontawesome',+express.static(__dirname+%2B+'/node_modules/@fortawesome/fontawesome-free/'));|code-block|syntax|javascript|5k96q|您可以在以下位置查看：^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

With expressjs, public it:

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

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

entityMap|blocks|key|2k7oq|text|您可以将其添加到您的标记之间，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2438d|或者无论你走上哪条路|fbveg|就是。|3keq5|编辑(2017-06-26)+-免责声明:有更好的答案。请不要使用此方法。在这个原始答案出现的时候，好的工具还不是很流行。使用当前的构建工具，如webpack或browserify，使用此答案可能没有意义。我可以删除它，但我认为重要的是要突出显示一个人拥有的各种选项以及可能的做和不做的事情。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

You could add it between your <code>&lt;head&gt;&lt;/head&gt;</code> tag like so:

<pre><code>&lt;head&gt;
 &lt;link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css"&gt;
&lt;/head&gt;
</code></pre>

Or whatever your path to your <code>node_modules</code> is.

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.

entityMap|blocks|key|dombm|text|因为我目前正在学习node+js，所以我也遇到了这个问题。首先，我所做的就是用npm安装字体--棒极了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9pajd|npm+install+font-awesome+--save-dev|code-block|syntax|javascript|ddch6|之后，我为css和字体设置了一个静态文件夹：|b6ht|app.use('/fa',+express.static(__dirname+%2B+'/node_modules/font-awesome/css'));
app.use('/fonts',+express.static(__dirname+%2B+'/node_modules/font-awesome/fonts'));|6g4fp|在html中：|am2k1|而且它工作得很好！^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|R|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|S|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|U|9|@]|A|@]|B|$]]]]

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

<pre><code>npm install font-awesome --save-dev
</code></pre>

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

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

and in html:

<pre><code>&lt;link href="/fa/font-awesome.css" rel="stylesheet" type="text/css"&gt;
</code></pre>

and it works fine!

entityMap|blocks|key|d4ch5|text|我遇到了一个有类似问题的问题，我想我会分享另一个解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a69rq|如果您正在创建Javascript应用程序，也可以通过Javascript直接引用字体强大的图标：|461ur|首先，执行中的步骤|e1i7b|本指南|dmke7|npm+install+@fortawesome/fontawesome-svg-core|code-block|syntax|javascript|avdo1|然后在你的javascript中：|7s5p|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'+})|7bcg3|完成上述步骤后，您可以使用以下命令在HTML节点内插入图标：|cl0dr|htmlNode.appendChild(fontIcon.node[0]);|1kc2n|您还可以使用以下命令访问表示图标的HTML字符串：|ccc8g|fontIcon.html^0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Z|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|10|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|11|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|12|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|13|9|@]|A|@]|B|$L|M]]|$2|N|4|O|6|7|8|14|9|@]|A|@]|B|$]]|$2|P|4|Q|6|K|8|15|9|@]|A|@]|B|$L|M]]|$2|R|4|S|6|7|8|16|9|@]|A|@]|B|$]]|$2|T|4|U|6|K|8|17|9|@]|A|@]|B|$L|M]]|$2|V|4|W|6|7|8|18|9|@]|A|@]|B|$]]|$2|X|4|Y|6|K|8|19|9|@]|A|@]|B|$L|M]]]]

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:

First, do the steps in <a href="https://fontawesome.com/how-to-use/with-the-api/setup/getting-started" rel="nofollow noreferrer">this guide</a>:

<pre><code>npm install @fortawesome/fontawesome-svg-core
</code></pre>

Then inside your javascript:

<pre><code>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' })
</code></pre>

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

<pre><code>htmlNode.appendChild(fontIcon.node[0]);
</code></pre>

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

<pre><code>fontIcon.html
</code></pre>

entityMap|blocks|key|6ussr|text|如果你正在使用npm，你可以使用Gulp.js，一个构建工具，从SCSS或更少的版本构建你的Font+Awesome包。此示例将从SCSS编译代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|330de|安装|5nrjb|Gulp.js|4q9du|本地为v4，全局为CLI+V2。|fhnbs|安装一个名为的插件|8d41c|狼吞虎咽|37fbu|使用npm。|eulbv|在您的公用文件夹中创建一个main.scss文件，并使用以下代码：|383m6|$fa-font-path："../webfonts"；@import+"fontawesome/fontawesome"；@import+"fontawesome/brands"；@import+"fontawesome/regular"；@import+"fontawesome/solid"；@import+"fontawesome/v4-shims"；|9t0t6|在您的应用程序目录中创建一个gulpfile.js并复制。|6b5nn|const+{+src，dest，series，parallel+}=+require('gulp')；const+sass+=require(‘gulp+sass’)；const+fs+=+require('fs')；function+copyFontAwesomeSCSS()+{+return+src('node|5kkb6|_|bk173|modules/@fortawesome/fontawesome-free/scss/|55vnf|*|52lho|.scss')+.pipe(dest(‘public/scss/dest’))；}函数copyFontAwesomeFonts()+{+return+src('node|4cqqo|asesd|modules/@fortawesome/fontawesome-free/webfonts/|319qs|9psct|')+.pipe(dest('public/dist/webfonts'))；}函数compileSCSS()+{+return+src(‘./public/scss/Teme.scss’)+.pipe(sass()).pipe(dest('public/css'))；}+//串行顺序完成任务，并行异步完成任务exports.build+=+parallel(+copyFontAwesomeFonts，series(copyFontAwesomeSCSS，compileSCSS)+)；|c4ucg|在你的命令行中运行'gulp+build‘，看看它的魔力。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1C|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1D|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1E|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|1F|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|1G|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|1H|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|1I|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|1J|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|1K|9|@]|A|@]|B|$]]|$2|S|4|T|6|7|8|1L|9|@]|A|@]|B|$]]|$2|U|4|V|6|7|8|1M|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1N|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|1O|9|@]|A|@]|B|$]]|$2|10|4|11|6|7|8|1P|9|@]|A|@]|B|$]]|$2|12|4|13|6|7|8|1Q|9|@]|A|@]|B|$]]|$2|14|4|X|6|7|8|1R|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|1S|9|@]|A|@]|B|$]]|$2|17|4|11|6|7|8|1T|9|@]|A|@]|B|$]]|$2|18|4|19|6|7|8|1U|9|@]|A|@]|B|$]]|$2|1A|4|1B|6|7|8|1V|9|@]|A|@]|B|$]]]]

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.

<ol>
<li>Install <a href="https://gulpjs.com/docs/en/getting-started/quick-start" rel="nofollow noreferrer">Gulp.js </a> v4 locally and CLI V2 globally. </li>
<li>Install a plugin called <a href="https://www.npmjs.com/package/gulp-sass" rel="nofollow noreferrer">gulp-sass</a> using npm.</li>
<li>Create a main.scss file in your public folder and use this code:

<pre><code>$fa-font-path: "../webfonts";
@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/regular";
@import "fontawesome/solid";
@import "fontawesome/v4-shims";
</code></pre></li>
<li>Create a gulpfile.js in your app directory and copy this.

<pre><code>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)
 );
</code></pre></li>
<li>Run 'gulp build' in your command line and watch the magic.</li>
</ol>

entityMap|blocks|key|83odv|text|SASS模块版本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|71jhd|很快，使用|9scug|会被贬低。SASS模块|clkvd|配置|5nrjl|作品使用|82ihc|取而代之的是。|63egd|@use+"../node_modules/font-awesome/scss/font-awesome"++with+(
++$fa-font-path:+"../icons"
);

.icon-user+{
++@extend+.fa;
++@extend+.fa-user;
}|code-block|syntax|javascript^0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|R|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|S|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|T|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|U|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|V|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|W|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|X|9|@]|A|@]|B|$P|Q]]]]

SASS modules version
Soon, using <code>@import</code> in sass will be depreciated. SASS modules <a href="https://sass-lang.com/documentation/at-rules/use#configuration" rel="nofollow noreferrer">configuration</a> works using <code>@use</code> instead.
<pre><code>@use &quot;../node_modules/font-awesome/scss/font-awesome&quot; with (
 $fa-font-path: &quot;../icons&quot;
);

.icon-user {
 @extend .fa;
 @extend .fa-user;
}
</code></pre>

I have installed font-awesome 4.0.3 icons using <code>npm install</code>.

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

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

How to use font-awesome icons from node-modules

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

 我已经安装了font-awesome 4.0.3图标，使用 ..。 如果我需要在node-modules中使用它，我应该如何在html文件中使用它？ 如果我需要编辑less文件，我需要在node-modules中编辑它吗？

问如何使用node-modules中令人敬畏的字体图标
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用node-modules中令人敬畏的字体图标EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用node-modules中令人敬畏的字体图标
EN