Sử dụng webpack và scss:
Cài đặt font-awesome bằng npm (sử dụng hướng dẫn thiết lập trên https://fontawesome.com/how-to-use )
npm install @fortawesome/fontawesome-free
Tiếp theo, sử dụng sao chép webpack-plugin , sao chép các phông chữ web thư mục từ node_modules để bạn quận thư mục trong quá trình xây dựng webpack của bạn. ( https://github.com/webpack-contrib/copy-webpack-plugin )
npm install copy-webpack-plugin
Trong webpack.config.js , hãy định cấu hình copy-webpack-plugin . LƯU Ý: Thư mục dist của webpack 4 mặc định là "dist", vì vậy chúng tôi đang sao chép thư mục webfonts từ node_modules vào thư mục dist.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/@fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
Cuối cùng, trong tệp main.scss của bạn , hãy cho fontawesome biết nơi thư mục webfonts đã được sao chép vào và nhập tệp SCSS bạn muốn từ 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`
và áp dụng những điều sau font-familycho (các) vùng mong muốn trong tài liệu html của bạn nơi bạn muốn sử dụng các biểu tượng fontawesome.
Thí dụ :
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)
}