ওয়েবপ্যাক এবং স্কেস ব্যবহার করে:
এনপিএম ব্যবহার করে ফন্ট-অসাধারণ ইনস্টল করুন ( https://fontawesome.com/how-to-use এ সেটআপ নির্দেশাবলী ব্যবহার করে )
npm install @fortawesome/fontawesome-free
এর পরে, ব্যবহার কপি-webpack-প্লাগইন , কপি webfonts থেকে ফোল্ডারের node_modules আপনার টু Dist ফোল্ডারটি আপনার 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 ফাইল, 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আপনার এইচটিএমএল নথিতে যেখানে আপনি ফন্টআউভেস আইকন ব্যবহার করতে চান সেখানে একটি পছন্দসই অঞ্চলে (গুলি) প্রয়োগ করুন ।
উদাহরণ :
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)
}