Setelah di tips sebelumnya kita berhasil menginstall boostrap, saat ini kita akan menginstall font awesome untuk mengaktifkan icon.
Install Font Awesome
Seperti pada dokumentasinya di https://fontawesome.com/, untuk menginstall melalui npm adalah dengan perintah berikut:
|
1 |
npm install --save-dev @fortawesome/fontawesome-free |
Tambahkan file css dan js font awesome pada angular.json
Selanjutnya, pada file angular.json tambahkan file berikut :
|
1 2 3 4 5 6 7 8 9 |
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css", "node_modules/@fortawesome/fontawesome-free/css/all.min.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/@fortawesome/fontawesome-free/js/all.min.js" ] |
Restart Angular
Restart angular dengan perintah :
|
1 |
ng serve |
Modifikasi app.component.html
Modifikasi button di app.component.html dan tambahkan font awesome icon :
|
1 |
<button class="btn btn-primary"><i class="fas fa-envelope"></i> Bootstrap Button</button> |
Maka icon akan muncul yang berarti kita sudah bisa menggunakan font-awesome di dalam aplikasi angular :
