Tinh chỉnh Font Awesome để giảm dung lượng

Awesome là một bộ font cho phép chèn các biểu tượng (icon) dạng vector vào trang Web. Awesome được sử dụng rộng rãi, và có rất nhiều website sử dụng bộ font này. Bạn có thể xem giới thiệu, cách sử dụng và tải về tại trang chủ FontAwesome.

FontAwesome bản miễn phí có tới 675 icon (phiên bản 4.7.0) cho bạn lựa chọn. Tuy nhiên thông thường mỗi trang Web lại chỉ sử dụng một số ít icon trong thư viện này, trong khi tất cả các icon đều được tải. Điều này dẫn tới dung lượng trang Web tăng, ảnh hưởng tới tốc độ tải trang.

Vậy làm thế náo để loại bỏ các icon không cần thiết, chỉ tải về những icon mà trang Web sử dụng?

Hướng dẫn tinh chỉnh FontAwesome để giảm dung lượng

Truy cập vào trang Icomoon

Thêm thư viện Fontawesome

Kéo xuống để chọn Font Awesome

Lựa chọn Icon

Trong cửa sổ này, chọn tất cả Icon cần thiết. Sau đó click chọn Generate Font phía bên dưới.

Download Font

Click chọn biểu tượng bánh răng ở góc dưới bên phải để vào trang thiết lập:

Có thể thay tên font và một số thiết lập khác:

Click vào Download để tải Font về sau khi thiết lập xong

Sử dụng

Upload font vừa tải về lên Host để sử dụng. Bạn có thể xem file demo trong file nén vừa tải về để xem cách sử dụng.

Kết luận

Với hướng dẫn trên dung lượng của Font sẽ giảm xuống khá nhiều, giúp cho trang Web của bạn được tải nhanh hơn. Bài viết này nới vè FontAwesome, tuy nhiên bạn cũng có thể áp dụng với các Font khác có sẵn trên thư viện của Icomoon như Material, Icomoon… hoàn toàn có thể đáp ứng nhu cầu của bạn.

Leave a Reply

Your email address will not be published. Required fields are marked *