वेबपैक और scss का उपयोग करना:
Npm का उपयोग करके फ़ॉन्ट-भयानक स्थापित करें ( https://fontawesome.com/how-to-use पर सेटअप निर्देशों का उपयोग करके )
npm install @fortawesome/fontawesome-free
इसके बाद, का उपयोग कर कॉपी-webpack-प्लगइन , कॉपी वेबफ़ॉन्ट से फ़ोल्डर node_modules अपने को जिले फ़ोल्डर आपके webpack निर्माण प्रक्रिया के दौरान। ( https://github.com/webpack-contrib/copy-webpack-plugin )
npm install copy-webpack-plugin
में webpack.config.js , कॉन्फ़िगर कॉपी-webpack-प्लगइन । नोट: डिफ़ॉल्ट वेबपैक 4 डिस्ट फ़ोल्डर "डिस्ट" है, इसलिए हम नोड फोल्डर से नोड_मॉडल से वेबफोन्स फोल्डर को कॉपी कर रहे हैं।
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
अंत में, अपनी main.scss फ़ाइल में, फ़ॉन्टफ़ॉरेबल बताएं जहाँ webfonts फ़ोल्डर को कॉपी किया गया है और आप जिस SCSS फाइल से नोड_मॉड्यूल्स चाहते हैं, उसे आयात करें ।
$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अपने 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)
}