- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,687
Kể từ hôm mình sử dụng giao diện mới có sử dụng icon Font Awesome cho Xenforo trên menu thì cũng có một vài bạn đã hỏi qua về cách chèn icon như thế vào menu hoặc các phần khác trong Xenforo thì làm như thế nào. Nếu bạn bảo là dùng hình ảnh thì cũng không sai, chỉ có điều đó không phải là cách mà chúng ta nên bây giờ vì site có nhiều ảnh quá cũng sẽ khiến tốc độ chậm lại.
Hiện nay có rất nhiều website sử dụng icon để nhấn mạnh và thêm sinh động cho các liên kết, danh sách chức năng… Lúc trước chúng ta thường sử dụng hình ảnh cho vấn đề này, nhưng hình ảnh có rất nhiều nhược điểm như thời gian tải lâu, nhòe đi khi phóng to… Chúng ta sẽ tìm cách giải quyết tất cả các vấn đế đó.
Như các bạn thấy, website trên sử dụng rất nhiều icon. Và những icon họ sử dụng chính là Font Awesome.
FontAwesome là gì?
Tóm lại là Font Awesome là một kiểu font giúp bạn chèn các icon vào web.
Cài Font Awesome vào Xenforo
Đầu tiên, các bạn hãy vào http://fortawesome.github.io/Font-Awesome/, bấm nút Download để tải về phiên bản mới nhất.
Bạn cần sao chép thư mục fonts và css vào thư mục gốc của website, sau đó nhúng tập tin CSS như sau vào trước </header> của template.
Cách sử dụng Font Awesome trong Xenforo
Cách sử dụng cơ bản
Cách sử dụng Font Awesome cũng vô cùng đơn giản, bạn chỉ cần đặt một class tương ứng với tên từng icon trong danh sách icon của Font Awesome là được. Bạn có thể đặt class ở bất cứ thẻ nào (div, span, strong, b, a, li,…fap..fap). Ví dụ:
Nói thế chắc bạn cũng hiểu rồi ha, nhớ kỹ là danh sách class của FontAwesome thì xem tại đây nhé.
Bạn có thể đặt thẻ h1, h2, h3 cho nó để nó hiển thị to ra, và bạn cũng có thể thêm màu cho nó giống như chỉnh màu cho font chữ thông thường
Tóm lại để chèn icon bạn chỉ cần đặt 1 class ứng với icon trong bảng mã Awesome là được vào chỗ cần đặt là được.
Hy vọng với bài đơn giản này sẽ giải quyết được thắc mắc của một số bạn về cách chèn font vào Xenforo.
Chúc các bạn thành công.
Hiện nay có rất nhiều website sử dụng icon để nhấn mạnh và thêm sinh động cho các liên kết, danh sách chức năng… Lúc trước chúng ta thường sử dụng hình ảnh cho vấn đề này, nhưng hình ảnh có rất nhiều nhược điểm như thời gian tải lâu, nhòe đi khi phóng to… Chúng ta sẽ tìm cách giải quyết tất cả các vấn đế đó.
FontAwesome là gì?
Để khỏi mất thời gian thì mình cũng xin nói nhanh qua thôi nhé, Font Awesome là một thành phần mở rộng trong Bootstrap Framework (bạn vẫn có thể dùng mà không cần Bootstrap) để chèn các icon (ký hiệu) vào website bằng font chữ. Để dễ hình dung hơn, bạn cứ tưởng tượng Font Awesome là sản phẩm của một font chữ dạng ký tự trên máy tính khi nó được render ra thành font chữ sử dụng trên website mà nó có thể hiển thị ở trình duyệt.
Tóm lại là Font Awesome là một kiểu font giúp bạn chèn các icon vào web.
Cài Font Awesome vào Xenforo
Đầu tiên, các bạn hãy vào http://fortawesome.github.io/Font-Awesome/, bấm nút Download để tải về phiên bản mới nhất.
Bạn cần sao chép thư mục fonts và css vào thư mục gốc của website, sau đó nhúng tập tin CSS như sau vào trước </header> của template.
Mã:
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">Cách sử dụng Font Awesome trong Xenforo
Cách sử dụng cơ bản
Cách sử dụng Font Awesome cũng vô cùng đơn giản, bạn chỉ cần đặt một class tương ứng với tên từng icon trong danh sách icon của Font Awesome là được. Bạn có thể đặt class ở bất cứ thẻ nào (div, span, strong, b, a, li,…fap..fap). Ví dụ:
Mã:
<span class="font-apple"></span>Nói thế chắc bạn cũng hiểu rồi ha, nhớ kỹ là danh sách class của FontAwesome thì xem tại đây nhé.
Bạn có thể đặt thẻ h1, h2, h3 cho nó để nó hiển thị to ra, và bạn cũng có thể thêm màu cho nó giống như chỉnh màu cho font chữ thông thường
Tóm lại để chèn icon bạn chỉ cần đặt 1 class ứng với icon trong bảng mã Awesome là được vào chỗ cần đặt là được.
Hy vọng với bài đơn giản này sẽ giải quyết được thắc mắc của một số bạn về cách chèn font vào Xenforo.
Chúc các bạn thành công.
Nguồn: congngheaz.com
Bài viết liên quan
Được quan tâm
Bài viết mới
