web-dev-qa-db-ja.com

node-modulesのfont-awesomeアイコンの使用方法

npm installを使用してfont-awesome 4.0.3アイコンをインストールしました。

Node-modulesから使用する必要がある場合、htmlファイルでどのように使用する必要がありますか？

Lessファイルを編集する必要がある場合、node-modulesで編集する必要がありますか？

cssnode.jslessnpmfont-awesome
96
Govan

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'))
})
97
Kevin Carmody

適切なフォントパスを設定する必要があります。例えば.

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;
}
47
Andreas Frische

ビルドプロセスの一部としてファイルをコピーする必要があります。たとえば、npm postinstallスクリプトを使用して、ファイルを正しいディレクトリにコピーできます。

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

一部のビルドツールには、既存のフォントが素晴らしいパッケージがあります。たとえば、webpackには font-awesome-webpack があり、require('font-awesome-webpack')を簡単に使用できます。

11
Wilfred Hughes

私の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');
10
Ken

Expressjsを使用して、公開します。

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

そして、あなたはそれを見ることができます：yourdomain.com/stylesheets/fontawesome/css/all.min.css

5
Kimprosh

次のように<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などの現在のビルドツールでは、おそらくこの答えを使用しても意味がありません。削除することはできますが、さまざまなオプションと可能なこととしないことを強調することが重要だと思います。

3
Con Antonakos

現在ノード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">

そしてそれは正常に動作します！

2
alvinsandwich

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」を実行し、魔法を見てください。

1
Ryan

Webpackとscssを使用：

Npmを使用してfont-awesomeをインストールします（ https://fontawesome.com/how-to-use のセットアップ手順を使用）

npm install @fortawesome/fontawesome-free

次に、copy-webpack-pluginを使用して、webfontsフォルダーをコピーしますnode_modulesからWebpackビルドプロセス中の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";
@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

//Include at least one of the below, depending on what icons you want.
@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";
1
pppglowacki

私は同様の問題を抱えているこの質問に出会い、私は別の解決策を共有すると思いました：

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
0
jrook