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

Nhúng icon vào web với FontTello

Nhúng icon vào web với FontTello

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

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

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

Fontello là gì?

Fontello là một dự án cộng đồng mở cho phép các webmaster sử dụng miễn phí font chữ tượng hình có trong danh sách của họ lên website. Fontello không phải là một tổ chức design webfont mà đó là nơi để các designer khác đăng tải các bộ font của họ lên và được chia sẻ dưới quyền CC BY (CreativeCommon).

Không giống như FontAwesome là bạn sẽ tải cả một gói font về kèm theo file CSS của họ để sử dụng, mà Fontello cho phép bạn tùy biến số font cần sử dụng và tải về gói font do chính bạn tùy biến ra. Như vậy, dung lượng của font tải về sẽ nặng hoặc nhẹ tùy vào số lượng font mà bạn chọn sử dụng.

Không những thế, bạn còn có quyền đổi tên class và code của font thay vì dùng tên class cứng như FontAwesome khiến việc chèn lên website sẽ dễ dàng hơn mà không cần xem bảng tra cứu mã font và tên class như FontAwesome.

Lợi ích khi dùng Fontello

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

  • Có hỗ trợ hiệu ứng xoay font giống Boostrap.
  • Có API để các Web Developer phát triển một số ứng dụng riêng.
  • CSS nhỏ gọn dễ dàng nhúng thẳng vào website mà không cần viết thẻ <link> để chèn cả file.
  • Tùy chỉnh font đượ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 bất cập đó là phong cách thiết kế của mỗi font sẽ không giống nhau, nên nếu bạn có dùng nhiều font khác nhau thì đôi khi bạn chỉ có thể dùng một package duy nhất nếu cần font có phong cách đồng nhất.

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

Đầu tiên hãy truy cập trang chủ https://fontello.com/ để lựa chọn các font mà 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 class của font mà bạn chọn là gì bằng cách chuyển qua tab Customize Name, ở đó bạn cũng vẫn có thể sửa lại tên class của font cho thích hợp với sở thích của bạn.

Sau đó hãy ấn vào nút Download webfont màu đỏ phía trên về, bạn sẽ được một file .zip và hãy giải nén nó ra, sau đó chạy file demo.html để xem danh sách font mà bạn cần sử dụng.

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

Bây giờ bạn có thể test bằng cách mở code file demo.html lên để xem các class của nó. Hoặc là bạn có thể nhúng nó vào WordPress ngay để sử dụng.

Cách chèn Fontello vào WordPress

Bây giờ bạn vào thư mục theme của bạn đang dùng trong /wp-content/themes tạo một thư mục mang tên fontello, sau đó copy 2 thư mục /css/font của fontello mà bạn vừa tải về máy vào đó.

Tiếp tục, chèn đoạn code này vào file functions.php có trong theme để nó chèn file CSS của Fontello vào website.



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' );
}


Trường hợp nếu bạn cần hiệu ứng xoay font thì chèn đoạn code này thay cho cái ở 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ờ thì bạn đã có thể sử dụng font bằng cách viết thẻ HTML kèm class tương ứng với font là được rồi, nếu bạn chưa hiểu thì mở bài hướng dẫn FontAwesome của mình để xem cách sử dụng font kiểu này.

Còn nếu bạn muốn có hiệu ứng xoay cho icon thì chỉ việc viết thêm class animate-spin vào thôi nhé. Ví dụ:

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

Bây giờ thì hãy tận hưởng và cho mình biết bạn có thích Fontello không nào? Và theo bạn, bạn thích Fontello hay FontAwesome hơn và vì sao? Riêng mình thì thích cả 2, vì có một số icon ở FontAwesome mà trong Fontello không có.

Nguồn: Fontello vs FontAwesome – Nên dùng cái nào để chèn icon vào web? | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
Hướng dẫn chi tiết cách audit content từ A -Z
Liên kết giữa các post với nhau bằng plugin Post Connector
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme