[Blogspot] Tạo icon từ bộ Font Awesome bằng CSS


Font Awesome là bộ font hình biểu tượng (icon) dạng vector được sử dụng rộng rãi cho các ứng dụng web. Trước khi có font Awesome, mỗi khi muốn hiển thị một hình icon minh họa, người viết web phải sử dụng một file hình ảnh. Việc này rất mất thời gian, vì phải tạo ra hình ảnh, rồi chỉnh CSS để hình ảnh hiển thị đúng ý, ngoài ra, nếu muốn thay đổi kích thước hiển thị thường phải tạo một hình ảnh khác, chưa kể đến việc người viết web chỉ biết mã HTML, CSS, JS mà không biết thiết kế đồ họa.

Sử dụng font Awesome, bạn có hơn 519 (tùy phiên bản) icon có thể sử dụng, bạn cũng có thể dễ dàng thay đổi kích thước, tạo hiệu ứng bóng đổ,… chỉ cần CSS và HTML mà vẫn hiển thị đẹp mắt trên nhiều trình duyệt hiện đại và thiết bị có độ phân giản cao.

Font Awesome cũng có nhược điểm là chúng là font nên các icon chỉ hiển thị đơn sắc. Bạn có thể cho chúng hiển thị màu đỏ, xanh,… gì cũng được, nhưng mỗi icon chỉ có một màu đó mà thôi. Cũng có thể icon bạn yêu cầu chưa có trong font. Nếu hình minh họa yêu cần phải có nhiều màu sắc hoặc hình icon chưa có, thì bạn vẫn phải dùng hình ảnh. Tuy nhiên, nhu cầu này cũng ít, và font Awesome có thể đáp ứng được hầu hết nhu cầu của bạn.

Nhưng thường thì sử dụng trong HTML mình mới lấy mã 1 cách đơn giản nhờ trang chủ, ngoài ra muốn chèn trong CSS thì phải làm sao, sau đây là hướng dẫn cho các bạn.
Cách thực hiện:
Đoạn CSS chúng ta cần dùng có dạng như dưới:
Dưới đây là toàn bộ icon chuyển dịch sang CSS, các bạn hãy thay \f000 trong content thành mã mà bạn muốn nhé. 
















Ngoài ra các bạn cũng có thể tùy chỉnh CSS hay chỉ cần thêm thuộc tính content vô chỗ nào cần hiển thị là được. 
Chúc các bạn thành công và hãy share bài viết nếu cảm thấy nó có ích nhé ^^
Nguồn: http://astronautweb.co

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

0 bình luận Tổng hợp bình luận

ĐĂNG KÍ NHẬN BÀI VIẾT MỚI

Please Enable Javascript!Enable JavaScript