Fontello vs FontAwesome – Nên dùng cái nào để chèn icon vào web? [NEW]

Fontello vs FontAwesome – Nên dùng cái nào để chèn icon vào web? [NEW]

Tôi đã từng giới thiệu FontAwesome trong Nhúng các biểu tượng đẹp vào trang web của bạn mà không cần sử dụng hình ảnh, lợi ích của cách chèn font này là dễ sử dụng, dễ tùy chỉnh với CSS và quan trọng là tiết kiệm băng thông trên website mà không cần phải tải hình ảnh.

Nhưng có nhiều ý kiến ​​cho rằng bộ FontAwesome hơi nặng và dẫn đến việc tải trang web có phần hơi chậm ngay cả khi sử dụng FontAwesome CDN. Tôi hoàn toàn thừa nhận rằng, FontAwesome khá nặng Vì bộ font của nó chứa rất nhiều icon, chưa kể nó vừa nâng cấp hỗ trợ thêm nhiều hiệu ứng nên file CSS của nó càng nặng hơn.

Do đó, mình sẽ giới thiệu cho các bạn một giải pháp khác để chèn font chữ vào website như FontAwesome nhưng bạn có thể linh hoạt hơn về kích thước của font chữ, đó là Fontello.

Fontello là gì?

Fontello là một dự án cộng đồng mở cho phép quản trị viên web sử dụng miễn phí các phông chữ tượng hình trên trang web của họ. Fontello không phải là một tổ chức thiết kế webfont mà là một nơi để các nhà thiết kế khác tải lên bộ phông chữ của họ và chia sẻ chúng theo CC BY (CreativeCommon).

Không giống như FontAwesome, bạn sẽ tải xuống toàn bộ gói phông chữ với tệp CSS của chúng để sử dụng, mà Fontello cho phép bạn sử dụng. Tùy chỉnh số lượng phông chữ để sử dụng và tải xuống gói phông chữ tùy chỉnh của riêng bạn. Như vậy, dung lượng của phông chữ tải về sẽ nặng hay nhẹ tùy thuộc vào số lượng phông chữ mà bạn chọn sử dụng.

Không chỉ vậy, bạn còn có quyền thay đổi tên lớp và mã của font thay vì sử dụng tên lớp cứng như FontAwesome sẽ giúp bạn chèn vào website dễ dàng hơn mà không cần phải xem bảng tra mã font và tên lớp như FontAwesome.

Lợi ích của việc sử dụng Fontello

Thư viện phông chữ phong phú với nhiều gói phông chữ khác nhau, và nó sẽ tiếp tục được mở rộng do sự đóng góp của các nhà thiết kế khác.

  • Hỗ trợ hiệu ứng xoay phông chữ như Boostrap.
  • Có một API dành cho Nhà phát triển web để phát triển một số ứng dụng của riêng họ.
  • CSS nhỏ gọn dễ dàng nhúng trực tiếp vào trang web mà không cần viết để chèn toàn bộ tệp.
  • Tùy chỉnh phông chữ được sử dụng, tiết kiệm tốc độ tải trang và băng thông.

Tuy nhiên cũng có một khuyết điểm là phong cách thiết kế của mỗi font sẽ không giống nhau nên nếu sử dụng nhiều font khác nhau, có khi chỉ dùng một gói duy nhất nếu cần font có kiểu dáng thống nhất. tốt nhất.

Hướng dẫn chèn Fontello vào WordPress

Đầu tiên hãy truy cập trang chủ http://fontello.com/ để chọn phông chữ bạn cần sử dụng bằng cách nhấp vào nó.

Hướng dẫn Fontello

Bạn vẫn có thể xem tên lớp của phông chữ bạn chọn là gì bằng cách chuyển sang tab Tùy chỉnh tênở đó bạn cũng có thể chỉnh sửa tên lớp của phông chữ cho phù hợp với sở thích của mình.

Sau đó nhấn. cái nút Tải xuống webfont màu đỏ ở trên, bạn sẽ nhận được một tệp .zip và giải nén nó, sau đó chạy tệp demo.html để xem danh sách các phông chữ bạn cần sử dụng.

Hướng dẫn chèn icon vào web bằng Fontello

Bây giờ bạn có thể kiểm tra nó bằng cách mở mã demo.html để xem các lớp của nó. Hoặc bạn có thể nhúng ngay vào WordPress để sử dụng.

Cách chèn Fontello trong WordPress

Bây giờ, hãy chuyển đến thư mục mà chủ đề của bạn đang sử dụng trong /wp-content/themes tạo một thư mục có tên là fontello, sau đó sao chép 2 thư mục / css/nét chữ của fontello bạn vừa tải xuống nó.

Tiếp tục, chèn mã này vào tệp functions.php được đưa vào chủ đề để nó chèn tệp CSS của Fontello vào trang web.

add_action( ‘wp_enqueue_scripts’, ‘insert_fontello’ );
function insert_fontello() {
wp_register_style( ‘fontello’, get_template_directory_uri().’/fontello/css/fontello.css’ );
wp_enqueue_style( ‘fontello’ );
}

Trong trường hợp nếu bạn cần hiệu ứng xoay phông chữ, hãy chèn mã này thay vì mã ở trên

add_action( ‘wp_enqueue_scripts’, ‘insert_fontello’ );
function insert_fontello() {
wp_register_style( ‘fontello’, get_template_directory_uri().’/fontello/css/fontello.css’ );
wp_enqueue_style( ‘fontello’ );
wp_register_style( ‘fontello-spin’, get_template_directory_uri().’/fontello/css/animation.css’ );
wp_enqueue_style( ‘fontello-spin’ );
}

Ok, bây giờ bạn có thể sử dụng font bằng cách viết thẻ HTML với class tương ứng với font, nếu bạn chưa hiểu thì mở bài hướng dẫn FontAwesome của tôi để xem cách sử dụng font này.

Và nếu bạn muốn có hiệu ứng xoay cho biểu tượng, chỉ cần viết một lớp animate-spin chỉ cần đến. Ví dụ:

Chèn Fontello với hiệu ứng xoay

Bây giờ hãy thưởng thức và cho tôi biết nếu bạn thích Fontello? Và theo ý kiến ​​của bạn, bạn thích Fontello hay FontAwesome và tại sao? Cá nhân tôi thích cả hai, vì có một số biểu tượng trong FontAwesome không có trong Fontello.

Đánh giá nội dung này