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

• Vuexy

• Giao diện Frontend
• Quản trị 2
  • Giáo dục
  • Xóa bộ nhớ Cache
• Quản lý Người dùng
• Người dùng
  • List
  • View
  • Edit
  • Danh sách
• Vai trò
  • Danh sách
• Nhật ký
• Log Viewer
  • Quản trị
  • Danh sách
• Quản trị Khách hàng
• Khách hàng
  • Danh sách
  • Danh sách đã xóa

• Đăng nhập

• Files

• 

  Two new item submitted

  Marketing Manager '17kb
• 

  52 JPG file Generated

  FontEnd Developer '11kb
• 

  25 PDF File Uploaded

  Digital Marketing Manager '150kb
• 

  Anna_Strong.doc

  Web Designer '256kb

• Members

• 

  John Doe

  UI designer
• 

  Michal Clark

  FontEnd Developer
• 

  Milena Gibson

  Digital Marketing Manager
• 

  Anna Strong

  Web Designer

• No results found.

• NỀN TẢNG

• Trang chủ
• Đào tạo
  • Lịch học
  • Bài tập
  • Quản lý Công việc
• Tin tức
  • Tin tức
  • Tuyển dụng
• Tiện ích
  • Công cụ
• Dịch vụ
  • Dịch vụ
• Giới thiệu/Liên hệ
  • Liên hệ
  • Kênh CHAT với giáo viên

Cài đặt thư viện icon Font Awesome

Chương 4-Bài 3. Cài đặt thư viện icon Font Awesome Tác giả: Dương Nguyễn Phú Cường #8380 Ngày đăng: Hồi xưa đó Lượt xem: 207 Xem định dạng IN 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ề Khóa học Bài học trước Bài học tiếp theo

Mục lục

Chương trình học

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 #8361
   2. Cài đặt VueJS và VueJS Command Line #8364
3. Làm quen với VueJS 2
   1. Khởi tạo dự án VueJS đầu tiên #8366
   2. Vuex là gì? Cài đặt và làm quen với Vuex #8384
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 #8373
   2. Cài đặt thư viện Bootstrap và Jquery #8374
   3. Cài đặt thư viện icon Font Awesome #8380
   4. Phân tích và tạo bố cục (layout) cho trang web NetaShop #8389
   5. Tạo component Slider cho trang web NetaShop #8407
   6. Cài đặt Vuex và khởi tạo dữ liệu dùng chung cho các components #8410
   7. Tạo component ProductItem và ProductList #8413
   8. Tạo component CartSummary #8419
   9. Tạo trang Kiểm tra Giỏ hàng (cart-checkout) #8421
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 #8424
   2. SourceCode tham khảo Lập trình web Frontend VueJS #8425
6. Bài tập VueJS 1
   1. Tạo chương trình tính toán đơn giản với VueJS #8737

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...

Chương trình học

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 #8361
   2. Cài đặt VueJS và VueJS Command Line #8364
3. Làm quen với VueJS 2
   1. Khởi tạo dự án VueJS đầu tiên #8366
   2. Vuex là gì? Cài đặt và làm quen với Vuex #8384
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 #8373
   2. Cài đặt thư viện Bootstrap và Jquery #8374
   3. Cài đặt thư viện icon Font Awesome #8380
   4. Phân tích và tạo bố cục (layout) cho trang web NetaShop #8389
   5. Tạo component Slider cho trang web NetaShop #8407
   6. Cài đặt Vuex và khởi tạo dữ liệu dùng chung cho các components #8410
   7. Tạo component ProductItem và ProductList #8413
   8. Tạo component CartSummary #8419
   9. Tạo trang Kiểm tra Giỏ hàng (cart-checkout) #8421
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 #8424
   2. SourceCode tham khảo Lập trình web Frontend VueJS #8425
6. Bài tập VueJS 1
   1. Tạo chương trình tính toán đơn giản với VueJS #8737

Bài học trước Bài học tiếp theo Về trang chủ Về Khóa học

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é!