Khai báo thứ viện css

Font awesome là một thư viện để tạo ra những icon tiện lợi, nhẹ nhàng có tính tùy chỉnh cao trong website. Thay vì bạn phải mất công desgin icon bằng file ảnh nặng nề thì giờ đây có hàng ngàn icon miễn phí sử dụng nhanh chóng.

Tại sao cần sử dụng Font Aawesome?

• Có thư viện hàng ngàn icon thường dùng để lựa chọn
• Chỉ cần thêm vào website dạng fonts rất nhẹ, web load nhanh
• Cách thêm vào website dễ dàng, chỉ cần khai báo đúng class là xong
• Dễ dàng tùy chỉnh màu sắc và kích thước font bằng thuộc tính color, font-size
• Không cần phải thuê thiets kế, tiết kiệm thời gian…

Thực sự Font Awesome rất tiện lợi cho dân lập trình web, thiết kế web nay bây giờ chúng ta cùng tìm hiểu cách sử dụng nó.

Cách sử dụng Font Awesome trong website

Bước 1: Download thư viện Font Awesome

Bạn download font trực tiếp tại trang chủ qua link: https://use.fontawesome.com/releases/v5.12.1/fontawesome-free-5.12.1-web.zip

Sau khi bạn download thành công bạn đưa Font Awesome vào trong dự án của mình. Ví dụ:

yourproject
---index.html
---fonts/
-------fontwesome/
-----------css/all.css
-------webfonts/

Bước 2: Import thư viện font vào file html

Thông thường phần import này bạn sẽ để nó ở file header của website để dùng chung cho toàn bộ web.

Bạn chú ý /your-path-to-fontawesome bạn thay thế nó bằng đường dẫn dến thư mục chứa thư viện fontawesome trong dự án của mình.

Sau khi import thành công bạn có thể hiển thị icon thông qua thẻ i, chỉ cần khai báo đúng class là ok.

Bước 3: Tìm icon cần sử dụng

Đây là bước rất quan trọng, trên thực tế bạn cần nhìn vào bản thiết kế website xem mình đang cần loại icon như thế nào.

Khi đã có được hình ảnh icon muốn sử dụng bạn truy cập vào thư viện font để tìm nó.

Link thư viện icon font: https://fontawesome.com/icons?d=gallery

Hiện tại Font Awesome có bản miễn phí và trả phí. Nếu ở mức làm website thông thường thì chúng ta lựa chọn icon Free.

Muốn tìm một font nào đó bạn có thể lướt qua dể quan sát hoặc đánh tên gợi ý để tìm icon. Ví dụ muốn tìm biểu tượng của facebook bạn chỉ cần đánh facebook vào ô search nhấn tìm là ra.

Bước 4: Lấy mã code đưa vào website

Khi đã nhìn thấy icon ưng ý bạn hãy nhấp vào nó để ra trang chi tiết của icon ở đó có mã code để copy sử dụng trong website.

Bây giờ bước cuối cùng chúng ta đưa đoạn code copy được vào vị trí muốn hiển thị icon fonts.

Tùy chỉnh icon fonts: Nếu ban muốn đổi màu icon, font-size bạn cứ thao tác như một đối tượng html thông thường.

Tổng kết

Thông quan bài viết này tôi đã hướng dẫn bạn từng bước để thêm font awesome vào website. Ngay bây giờ bạn hãy tập trung thao tác lại từng bước để thực hành thành công trên dự án của mình.

Mọi nền tảng web hiện nay đều sử dụng thư viện Font. Nếu bạn gọi tên Font là trong mà trong HĐH Windows/Mac OS không có font đó sẽ dẫn đến lỗi font rất xấu.

Do đó mặc định ta phải khai báo font cho website, măc thường dùng nhất là Font Google thì hosting/Server của Google rất mạnh. Nếu muốn tốc độ ấn tượng hơn một số Theme Wordpress có tích hợp sẳn font để lưu trực tiếp trên hosting của mình mà không cần phải gọi Font từ Google

Roboto là font rất được ưu chuộng trong Website hiện nay do vậy mình sẽ khai báo Font này!

Thư viện:

Cách dùng:

#tên_đối_tượng{font-family: 'Roboto', sans-serif}

⇒ Xem thêm: https://fonts.google.com/

2. Thư viện Font Awesome

Hiện tại có 2 phiên bản Font Awesome thường dùng là Version 4.7 và Version 5. Version hỗ trợ rất nhiều định dạng icon và nhiều icon khác nhau. Nhưng với người dùng cơ bản bạn có thể sử dụng Version V4.7 là được rồi.

Font Awesome là thư viện các icon trên Website được rất nhiều website ưu chuộng do cách sử dụng đơn giản của nó!

Thư viện:

Và nếu bạn sử dụng cả Font Google và Font Awesome thì ta thay thế bằng đoạn sau:

Thư viện:

3. Thư viện Bootstrap

Bootstrap là một framework HTML, CSS, và JavaScript cho phép thiết kế phát triên responsive web mobile nhanh chóng.

Nếu bạn từng gặp các đoạn HTML sau như:


↳ Thì nó đang sử dụng từ thư viện bootstrap để thiết kế giao diện Responsive nhanh chóng hơn

Thư viện:

⇛ Xem thêm: https://getbootstrap.com/docs/3.4/getting-started/#download

4. Thư viện Jquery

jQuery là một thư viện được xây dựng từ Javascript nhằm giúp lập trình viên xây dựng những chức năng có sử dụng Javascript trở nên dễ dàng hơn. jQuery được tích hợp nhiều module khác nhau từ module hiệu ứng cho đến module truy vấn selector. jQuery được sử dụng đến 99% trên tổng số website trên thế giới (trừ những website sử dụng JS Framework).

Các module chính của jQuery bao gồm:

• Ajax - xử lý Ajax
• Atributes - Xử lý các thuộc tính của đối tượng HTML
• Effect - xử lý hiệu ứng
• Event - xử lý sự kiện
• Form - xử lý sự kiện liên quan tới form
• DOM - xử lý Data Object Model
• Selector - xử lý luồng lách giữa các đối tượng HTML

Thư viện:

⇛ Xem thêm: https://developers.google.com/speed/libraries/#jquery

5. Thư viện Button Share Sharethis

Thư viện Button Share Addthis

Trong website tin tức hoặc bán hàng không thể thiếu Button Share, thay thì phải code quá phứt thì ta sử dụng thư viện Addthis luôn

Có các button Share hầu hết các mạng xã hội và các app

• Button Follow
• Floating Button
• Sticky Button
• Reation như Facebook..vv
• Image share (Hiện button share khi rê chuột vào ảnh)

Cách sử dụng rất đơn giản chỉ cần khai báo thư viện Javascipt và cài đặt HTML tại vị trí muốn hiện thị button và HTML là được.