Trang Trí Diễn Đàn XenForo với Font Awesome: Thêm Icon Vào Mọi Nơi!
Một hình ảnh đáng giá ngàn lời nói, và một icon đúng chỗ có thể làm giao diện của bạn trở nên chuyên nghiệp và trực quan hơn rất nhiều. Hãy cùng khám phá cách tận dụng thư viện Font Awesome có sẵn trong XenForo.
Tin vui là XenForo 2.x đã tích hợp sẵn thư viện Font Awesome, có nghĩa là bạn có thể sử dụng kho "báu vật" này mà không cần cài đặt thêm bất cứ thứ gì. Việc sử dụng icon một cách hợp lý sẽ mang lại những lợi ích to lớn:
Hãy dành chút thời gian khám phá thư viện Font Awesome và sáng tạo với những ý tưởng của riêng bạn!
Chúc các bạn thành công.
Một hình ảnh đáng giá ngàn lời nói, và một icon đúng chỗ có thể làm giao diện của bạn trở nên chuyên nghiệp và trực quan hơn rất nhiều. Hãy cùng khám phá cách tận dụng thư viện Font Awesome có sẵn trong XenForo.
Giới thiệu
Bạn có bao giờ cảm thấy giao diện diễn đàn của mình hơi "khô khan" với toàn chữ là chữ không? Làm thế nào để hướng dẫn người dùng một cách trực quan hơn, ví dụ như đặt một biểu tượng "câu hỏi" cạnh mục "Hỏi & Đáp", hay một biểu tượng "lỗi" cạnh các báo cáo bug? Câu trả lời nằm ở Font Awesome - một thư viện với hàng ngàn icon vector sắc nét.Tin vui là XenForo 2.x đã tích hợp sẵn thư viện Font Awesome, có nghĩa là bạn có thể sử dụng kho "báu vật" này mà không cần cài đặt thêm bất cứ thứ gì. Việc sử dụng icon một cách hợp lý sẽ mang lại những lợi ích to lớn:
- Tăng tính trực quan: Giúp người dùng nhận diện các khu vực và chức năng nhanh hơn.
- Cải thiện thẩm mỹ: Tạo ra một giao diện hiện đại, chuyên nghiệp và bớt nhàm chán.
- Tạo điểm nhấn: Thu hút sự chú ý vào các yếu tố quan trọng.
Phần 1: "Kho Báu" Icon - Tìm Kiếm và Lấy Mã
Trước tiên, bạn cần biết nơi để tìm và cách để lấy "vũ khí" của mình.- Truy cập trang Font Awesome: Mở trình duyệt và vào địa chỉ fontawesome.com/search.
- Lọc các icon miễn phí: XenForo tích hợp sẵn bộ icon miễn phí. Trên thanh công cụ bên trái của trang tìm kiếm, hãy tick vào ô "Free" để chỉ hiển thị các icon bạn có thể sử dụng.
- Tìm kiếm icon bạn muốn: Sử dụng thanh tìm kiếm để gõ tên icon bằng tiếng Anh. Ví dụ: `home`, `question`, `bug`, `book`, `user`...
- Lấy mã HTML và Unicode:
- Nhấp vào icon bạn thích. Một cửa sổ chi tiết sẽ hiện ra.
- Bạn sẽ thấy một đoạn mã HTML, ví dụ:
<i class="fa-solid fa-house"></i>
. Hãy chú ý đến phần class: "fa-solid fa-house". - Ở góc trên bên phải, bạn cũng sẽ thấy một mã Unicode, ví dụ: f015. Mã này sẽ được dùng cho các tùy chỉnh CSS.
Phần 2: "Trang Trí" Các Khu Vực Phổ Biến
2.1. Chèn Icon vào Tab Điều Hướng (Navigation Tabs) - Phương pháp CSS
Đây là cách mạnh mẽ và đảm bảo hoạt động để thêm icon vào các tab menu chính như "Forums", "What's new"...- Bước 1: Xác định Navigation ID
VàoACP > Setup > Public navigation
. Tìm đến mục bạn muốn thêm icon (ví dụ: "Forums") và ghi lại giá trị trong cột "Navigation ID". Navigation ID của mục "Forums" thường làforums
. - Bước 2: Lấy mã Unicode của Icon
Làm theo hướng dẫn ở Phần 1, tìm một icon phù hợp (ví dụ:comments
) và lấy mã Unicode của nó (ví dụ:f086
). - Bước 3: Viết CSS trong extra.less
VàoACP > Appearance > Styles > [Style con của bạn] > Templates
, tìm và mở template extra.less. Dán đoạn mã sau vào cuối file:Less:// Thêm icon vào tab navigation "Forums".p-nav-list .p-navEl .p-navEl-link[data-nav-id="forums"]::before { .m-faIcon(@fa-var-comments); // Mã Unicode của icon fa-comments margin-right: 5px; // Tạo khoảng cách với chữ } // Ví dụ thêm: Thêm icon vào tab "What's new" .p-nav-list .p-navEl .p-navEl-link[data-nav-id="whatsNew"]::before { .m-faIcon(@fa-var-bolt); // Mã Unicode của icon fa-bolt (sấm sét) margin-right: 5px; }
- Nhấn Save và xem kết quả.
2.2. Chèn Icon vào Tiêu Đề Chuyên Mục (Node Titles)
Tương tự như trên, chúng ta sẽ dùng CSS để làm đẹp cho danh sách chuyên mục.- Vào
ACP > Forums > Nodes
, tìm chuyên mục bạn muốn thêm icon và ghi lại Node ID của nó (ví dụ: chuyên mục "Game Online" có ID là15
). - Vào lại template extra.less.
- Dán đoạn mã sau vào cuối file:
Less:// Icon cho chuyên mục Game Online (ID 15) .node--id15 .node-title::before { .m-faIcon(@fa-var-gamepad); // Mã Unicode của icon fa-gamepad margin-right: 6px; }
- Nhấn Save.
2.3. Chèn Icon vào Tiền Tố Chủ Đề (Thread Prefixes)
Làm cho các tiền tố (ví dụ: [Hỏi đáp], [Thảo luận]) trở nên trực quan hơn.- Vào
ACP > Forums > Thread prefixes
. Tạo hoặc sửa một tiền tố. - Trong phần "CSS class name", hãy thêm vào một class tùy chỉnh của riêng bạn, ví dụ:
prefix--question
. - Vào lại template extra.less và thêm đoạn mã sau:
Less:// Icon cho tiền tố [Hỏi đáp] .label.prefix--question::before { .m-faIcon(@fa-var-question); // Mã Unicode của icon fa-circle-question margin-right: 4px; vertical-align: middle; }
- Nhấn Save.
Lời kết
Font Awesome là một công cụ mạnh mẽ và đơn giản được tích hợp sẵn trong XenForo, giúp bạn "thổi hồn" vào giao diện diễn đàn một cách nhanh chóng. Bằng việc sử dụng icon một cách có chiến lược, bạn không chỉ làm cho trang web của mình đẹp hơn mà còn cải thiện đáng kể trải nghiệm người dùng, giúp họ điều hướng và nhận biết thông tin dễ dàng hơn.Hãy dành chút thời gian khám phá thư viện Font Awesome và sáng tạo với những ý tưởng của riêng bạn!
Chúc các bạn thành công.
VNXF.VN
Bài viết liên quan
Được quan tâm
Bài viết mới