Xem Nội Dung Ngay

Hướng dẫn cách dùng Google Icons thay thế Font Awesome

Hướng dẫn cách chèn font icon nhanh chóng dễ dàng với Google icons, tương tự như Font Awesome.

Cường Trần
Cường Trần
3 phút đọc
Hướng dẫn cách dùng Google Icons thay thế Font Awesome

Hầu hết theme của Ghost đều không bao giờ dùng Font Awesome để tạo icon cho site, thay vào đó là dùnv SVG icon để site nhanh và nhẹ nhàng nhất có thể.

Nhưng đó là về phía lập trình viên, người dùng luôn mong muốn tự mình có thể thêm bất cứ icon nào mình muốn một cách dễ dàng nhất.

Vì vậy, tôi sẽ giới thiệu một giải pháp cho bạn thay thế Font Awesome nhưng cực dễ cài đặt và cách dùng tương tự như Font Awesome.

Đó là thư viện Google icons với hơn 1.200+ icon miễn phí 😋 (Font Awesome là 1.700+ và trả phí).

Cài đặt Google Icon vào Ghost

Bạn sẽ không thấy hướng dẫn cài đặt Google icon tại trang chủ, nhưng đừng lo thực tế cài đặt Google icon rất nhanh và đơn giản.

Bạn chỉ cần thêm 5 links sau vào ghost head để load toàn site.

<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
rel="stylesheet">
Thêm 5 link Google Icons vào trong Ghost Head (Site Head)
Thêm 5 link Google Icons vào trong Ghost Head (Site Head)

Giải thích thêm 1 chút là tại sao cần 5 links trên.

Bạn hoàn toàn có thể chỉ thêm 1 link NẾU bạn chỉ dùng đúng một loại icon nhất định. Ví dụ như OUTLINED, bạn chỉ thêm link outline mà thôi.

Google phân loại icons nên bạn cần 5 link trên để sử dụng
Google phân loại icons nên bạn cần 5 link trên tương ứng để sử dụng

Sau khi thêm 5 link trên vào Ghost Head thì việc cài đặt đã xong. Quá nhanh!

Cách dùng Google icons cho Ghost

Cách dùng tương tự như Font Awesome.

Mỗi icon sẽ có một class riêng. Khi muốn chèn icon nào bạn chỉ cần truy cập thư viện Google icons và chọn icon muốn dùng, sau đó dán code vào và dùng.

Chọn icon cần dùng trong thư viện Google Icons
Chọn icon cần dùng trong thư viện Google Icons
<span class="material-icons-outlined">
verified_user
</span>
Mỗi icon sẽ có HTML code tương tự như trên
fingerprint
add_task
emoji_objects
play_circle_outline
air
screen_lock_rotation
spa
Google icons

Bạn có thể đổi màu, thay đổi kích thước bằng CSS như cách bạn dùng font (đó là lý do được gọi là font icon).

Kết hợp với HTML block bạn có thể chèn font icon này vào nút CTA hay bảng giá hay danh sách tính năng,...

Lưu ý: Bạn không thể dùng trên thanh điều hướng Menu của site.

Lời kết...

Như đã nói, font icon tiện dùng khi bạn muốn chèn nhanh bất cứ icon nào vào bài viết hay website, nhưng về vận hành thì nó sẽ giảm tốc độ site bạn lại một chút (mặc dù thư viện siêu nhẹ).

Muốn chèn Font Awesome sẽ phức tạp không cần thiết hơn nhiều so với Google icons. Bạn nên dùng Google icons thay thế.

Chúc bạn thành công!

Hướng Dẫn

Bạn có thể quan tâm

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Hướng dẫn tự tạo thông báo email thời gian thực khi có thành viên mới đăng ký bằng IFTTT miễn phí.

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Thủ thuật chuyển đổi "đồng loạt" mọi định dạng ảnh sang WebP

Hướng dẫn chuyển đổi "all-in-one" đồng loạt mọi định dạng ảnh cho bài viết sang webp với một lệnh đơn giản.

Thủ thuật chuyển đổi đồng loạt mọi định dạng ảnh sang WebP

Mẹo tạo popup thông báo đơn giản cho website Ghost

Hướng dẫn cách tạo Popup thông báo cho Ghost siêu nhanh và đơn giản.

Mẹo tạo popup thông báo đơn giản cho website Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.