回答:
としてインストール npm install font-awesome --save-dev
開発の少ないファイルでは、を使用してフォント全体を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";
注として、これを行っても、それほど多くのバイトを節約することはできません。いずれにせよ、2〜3k行の縮小されていないCSSが含まれることになります。
また/fonts/、パブリックディレクトリにあるフォルダーからフォント自体を提供する必要もあります。たとえば、次のような単純なgulpタスクを使用してそれらをコピーできます。
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})
fa-font-pathを目的の場所に設定して、フォントの静的パスを調整することもできます。
@fa-font-path: "/public/fonts";
適切なフォントパスを設定する必要があります。例えば
$fa-font-path:"../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
@extend .fa;
@extend .fa-user;
}
../assets/font-awesome/fontsは私のために働きます。ありがとう。
ビルドプロセスの一部としてファイルをコピーする必要があります。たとえば、npm postinstallスクリプトを使用してファイルを正しいディレクトリにコピーできます。
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"一部のビルドツールには、既存のfont-awesomeパッケージがあります。たとえば、webpackにはfont-awesome-webpackがあり、シンプルにできますrequire('font-awesome-webpack')。
webpackとscssの使用：
npmを使用してfont-awesomeをインストールします（https://fontawesome.com/how-to-useのセットアップ手順を使用）
npm install @fortawesome/fontawesome-free次に、copy-webpack-pluginを使用して、webpackのビルドプロセス中にnode_modulesからdistフォルダーにwebfontsフォルダーをコピーします。（https://github.com/webpack-contrib/copy-webpack-plugin）
npm install copy-webpack-pluginではwebpack.config.jsは、configure コピーのWebPACK -プラグイン。注：デフォルトの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にコピーし、あなたから欲しいSCSSファイルインポートされたフォルダnode_modulesを。
$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)
}
@import "../node_modules/[...]"へのパスを調整する必要がありました@import "@/../node_modules/[...]"
resolve: {alias: {'node_modules': path.join(__dirname, 'node_modules')}}次に@import "node_modules/[...]
expressjsを使用して、それを公開します。
app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/@fortawesome/fontawesome-free/'));そして、あなたはそれを見ることができます： yourdomain.com/stylesheets/fontawesome/css/all.min.css
devDependency。このソリューションが機能するためには（本番環境で）、パッケージを通常の依存関係としてインストールする必要がありますか？
--saveありません--save-dev
次の<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などの現在のビルドツールでは、おそらくこの答えを使用しても意味がありません。私はそれを削除することができますが、私が持っているさまざまなオプションと可能なdosとnotsを強調することが重要だと思います。
@import '../node_modules/...'他の答えが示したようにすることができます。
font-awesomeを変更する場合、他の回答と同じように調整またはメンテナンスが必要になります。違いは、この答えは翻訳やタスクを必要としないことです。インポートが期待される場所に正確に配置されるだけです。で<link>タグ。
私は現在ノードjsを学習しているので、この問題も発生しました。私がしたことは、まず第一に、npmを使用してfont-awesomeをインストールしました。
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">そしてそれはうまくいきます！
npmを使用している場合は、Gulp.jsビルドツールを使用して、SCSSまたはLESSからFont Awesomeパッケージをビルドできます。この例では、SCSSからコードをコンパイルします。
Gulp.js v4をローカルに、CLI V2をグローバルにインストールします。
npmを使用してgulp -sassというプラグインをインストールします。
パブリックフォルダーにmain.scssファイルを作成し、次のコードを使用します。
$fa-font-path: "../webfonts";
@import "fontawesome/fontawesome";
@import "fontawesome/brands";
@import "fontawesome/regular";
@import "fontawesome/solid";
@import "fontawesome/v4-shims";アプリディレクトリに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)
);コマンドラインで「gulp build」を実行して、魔法を見てください。
私は同様の問題を抱えているこの質問に出くわし、別の解決策を共有しようと思いました：
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