Cài đặt Thư Viện Icon Font Awesome | Nền Tảng

NenTang.vn

• Trang chủ
• Về chúng tôi
  • Giới thiệu
  • Liên hệ
• Đào tạo
  • Các khóa học
  • Giáo vụ
• Tin tức
  • Các tin tức
  • Tuyển dụng

• Đăng nhập

1. Trang chủ Giáo dục
2. VueJS căn bản
3. Cài đặt thư viện icon Font Awesome

1. VueJS là gì?
2. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
   1. Cài đặt NodeJS
   2. Cài đặt VueJS và VueJS Command Line
3. Làm quen với VueJS 2
   1. Khởi tạo dự án VueJS đầu tiên
   2. Vuex là gì? Cài đặt và làm quen với Vuex
4. Dự án thực tế mẫu - Trang web Bán hàng VueJS 9
   1. Khởi tạo dự án Web bán hàng NetaShop
   2. Cài đặt thư viện Bootstrap và Jquery
   3. Cài đặt thư viện icon Font Awesome
   4. Phân tích và tạo bố cục (layout) cho trang web NetaShop
   5. Tạo component Slider cho trang web NetaShop
   6. Cài đặt Vuex và khởi tạo dữ liệu dùng chung cho các components
   7. Tạo component ProductItem và ProductList
   8. Tạo component CartSummary
   9. Tạo trang Kiểm tra Giỏ hàng (cart-checkout)
5. Tài liệu tham khảo 2
   1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend VueJS
   2. SourceCode tham khảo Lập trình web Frontend VueJS
6. Bài tập VueJS 1
   1. Tạo chương trình tính toán đơn giản với VueJS

Chương 5-Bài 3. Cài đặt thư viện icon Font Awesome

• IN

Tác giả: Dương Nguyễn Phú Cường Số phút học: 60 phút Ngày đăng: 23/12/2025, 13:45 Lượt xem: 2125 Chúng ta sẽ sử dụng thư viện Font Awesome: https://github.com/FortAwesome/vue-fontawesome Cài đặt Font Awesome

• Thực thi câu lệnh sau:

npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/free-regular-svg-icons npm i --save @fortawesome/vue-fontawesome

• Hiệu chỉnh code trong file project-netashop/src/main.js

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false // Import thư viện Bootstrap (JS và CSS) import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' // Import thư viện Font Awesome import { library } from '@fortawesome/fontawesome-svg-core' import { fab } from '@fortawesome/free-brands-svg-icons' import { fas } from '@fortawesome/free-solid-svg-icons' import { far } from '@fortawesome/free-regular-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(fab, fas, far) Vue.component('font-awesome-icon', FontAwesomeIcon) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

Cách sử dụng

Sau khi cài đặt và import thư viện, chúng ta có thể sử dụng Font Awesome trong Vue Template như sau:

• Solid icons: @fortawesome/free-solid-svg-icons

<font-awesome-icon :icon="['fas', 'image']" /> <font-awesome-icon :icon="['fas', 'user']" />

• Regular icons: @fortawesome/free-regular-svg-icons

<font-awesome-icon :icon="['far', 'image']" /> <font-awesome-icon :icon="['far', 'user']" />

• Branch icons:@fortawesome/free-brands-svg-icons

<font-awesome-icon :icon="['fab', 'twitter']" /> Về trang chủ Về Chương trình học Bài học trước Bài học tiếp theo

Ủng hộ tác giả

Bình luận

Bình luận của bạn

Vui lòng đăng nhập để gởi bình luận!

Đăng nhập Danh sách bình luận

Chưa có bình luận nào!

Mục lục

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

1. VueJS là gì?
2. Giới thiệu, cài đặt, cấu hình môi trường lập trình 2
   1. Cài đặt NodeJS
   2. Cài đặt VueJS và VueJS Command Line
3. Làm quen với VueJS 2
   1. Khởi tạo dự án VueJS đầu tiên
   2. Vuex là gì? Cài đặt và làm quen với Vuex
4. Dự án thực tế mẫu - Trang web Bán hàng VueJS 9
   1. Khởi tạo dự án Web bán hàng NetaShop
   2. Cài đặt thư viện Bootstrap và Jquery
   3. Cài đặt thư viện icon Font Awesome
   4. Phân tích và tạo bố cục (layout) cho trang web NetaShop
   5. Tạo component Slider cho trang web NetaShop
   6. Cài đặt Vuex và khởi tạo dữ liệu dùng chung cho các components
   7. Tạo component ProductItem và ProductList
   8. Tạo component CartSummary
   9. Tạo trang Kiểm tra Giỏ hàng (cart-checkout)
5. Tài liệu tham khảo 2
   1. Kho sách, nguồn tài liệu tham khảo Lập trình web Frontend VueJS
   2. SourceCode tham khảo Lập trình web Frontend VueJS
6. Bài tập VueJS 1
   1. Tạo chương trình tính toán đơn giản với VueJS

Về trang chủ Về Chương trình học Bài học trước Bài học tiếp theo

Menu Tiện ích

Trang chủ Chia sẻ Facebook Liên hệ Hỏi đáp/Chat trợ giúp

Menu Hướng dẫn Học tập

• Nhắc nhở
• Các bước cần thực hiện

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Thực hiện các bước tuần tự theo nội dung Bài học nhé!

Nền tảng các kiến thức học tập

Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.

Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!

Khám phá, trải nghiệm ngay