Verwenden von Webpack und scss:
Installieren Sie font-awesome mit npm (mithilfe der Setup-Anweisungen unter https://fontawesome.com/how-to-use ).
npm install @fortawesome/fontawesome-free
Als nächstes wird die Verwendung von Copy-webpack-Plugin , kopieren Sie die Webfonts Ordner aus node_modules zu Ihrem dist - Ordner während Ihres webpack Build - Prozess. ( https://github.com/webpack-contrib/copy-webpack-plugin )
npm install copy-webpack-plugin
Konfigurieren Sie in webpack.config.js das copy-webpack-plugin . HINWEIS: Der Standardordner für webpack 4 dist ist "dist", daher kopieren wir den Ordner "webfonts" von "node_modules" in den Ordner "dist".
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
Schließlich in Ihrer main.scss fontawesome Datei, sagen , wo die Webfonts Ordner kopiert wurde , und die SCSS - Dateien importieren Sie wollen 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`
und wenden Sie Folgendes font-familyauf einen oder mehrere gewünschte Bereiche in Ihrem HTML-Dokument an, in denen Sie die Fontawesome-Symbole verwenden möchten.
Beispiel :
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)
}