การใช้ webpack และ scss:
ติดตั้ง font-awesome โดยใช้ 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 ปลั๊กอิน หมายเหตุ: โฟลเดอร์ 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 ที่อักษรบนเว็บโฟลเดอร์ได้ถูกคัดลอกไปและนำเข้าไฟล์ 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กับพื้นที่ที่ต้องการในเอกสาร html ของคุณที่คุณต้องการใช้ไอคอน fontawesome
ตัวอย่าง :
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)
}