web-dev-qa-db-ja.com

scssを使用するためにnpmでfont awesome 5をインストールします

タイトルが言うように、私はscssの目的のためにnpmでfont awesome 5をインストールできません。

バージョン5をインストールしようとしています

https://fontawesome.com/how-to-use/use-with-node-js に準拠

npm i --save @fortawesome/fontawesome

Node_modulesのインストールを確認すると、接続するscssファイルがありません。 app.scssファイルにstyles.cssファイルを含めようとしましたが、うまくいきませんでした。

バージョン4のセットアップ：

package.json "font-awesome": "^4.7.0",

app.scss @import "node_modules/font-awesome/scss/font-awesome.scss";

使用法<i className="fa fa-save icon controlItem"></i>

やさしい。バージョン5でこれを実現するにはどうすればよいですか？間違ったパッケージを使用していますか？

更新

明らかに、@ fortawesome/fontawesomeを使用するだけでは十分ではありません。パッケージは分割されているため、npm install --save @fortawesome/fontawesome-free-regularを選択する必要があります

javascriptnpmsassfont-awesome
10
Anders
npm install --save-dev @fortawesome/fontawesome
npm install --save-dev @fortawesome/free-regular-svg-icons
npm install --save-dev @fortawesome/free-solid-svg-icons
npm install --save-dev @fortawesome/free-brands-svg-icons

あなたのapp.jsまたは同等のJavascriptファイル、

import fontawesome from '@fortawesome/fontawesome'
import regular from '@fortawesome/free-regular-svg-icons'
import solid from '@fortawesome/free-solid-svg-icons'
import brands from '@fortawesome/free-brands-svg-icons'

fontawesome.library.add(regular)
fontawesome.library.add(solid)
fontawesome.library.add(brands)

使用法については、クラス名の使用方法にわずかな変更があります。 「完全な」クラス名については、Fontawesomeサイトのアイコンを参照してください。

例

<i class="fas fa-chevron-left"></i>

フォントの3種類すべてをプロジェクトに追加するという考えは便利なように思えますが、プロジェクトのビルド/コンパイル時にパフォーマンスが低下することに注意してください。したがって、すべてではなく必要なフォントを追加することを強くお勧めします。

18
Ru Chern Chong

FontAwesome 5の私の理解は、JavaScriptを使用してインラインSVGをDOMに追加することです。

この記事をご覧ください： JS with SVG

Scssファイルをコンパイルするのではなく、次のjavasciptファイルを含めるだけで済みます：fontawesome-all.js、HTMLに追加したアイコンはすべて、SVGに自動的に変換されます。

0
Sam Willis

Laravel Mixを使用してFont Awesome固有のすべてのJavascriptファイルを_vendor.js_に抽出する場合、パッケージをextract()メソッドを配列として使用。フォントのサポートを追加するためにfontawesome.library.add()メソッドを使用する必要さえありません。これは、将来ベンダー固有のファイルキャッシュを管理するのに役立ちます。

_mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        '@fortawesome/fontawesome',
        '@fortawesome/fontawesome-free-brands',
        '@fortawesome/fontawesome-free-regular',
        '@fortawesome/fontawesome-free-solid',
        '@fortawesome/fontawesome-free-webfonts'
    ]);
_
0
Md Mazedul Islam Khan