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

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Thêm hiệu ứng Lightbox cho ảnh siêu đơn giản cho 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.

bởi @CườngTrần