Tutorial 2x Trang Trí Diễn Đàn XenForo 2.3 với Font Awesome: Thêm Icon Vào Mọi Nơi!

PVS

Super Moderator
Thành viên BQT
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.

trang-tri-dien-dan-xenforo-voi-fontawesome.png
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.
Bài viết này sẽ hướng dẫn bạn từ A đến Z: từ cách tìm kiếm và lấy mã icon cho đến các kỹ thuật để chèn chúng vào những vị trí phổ biến nhất trên diễn đàn XenForo.

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.
  1. Truy cập trang Font Awesome: Mở trình duyệt và vào địa chỉ fontawesome.com/search.
  2. 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.
  3. 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`...
  4. 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.
trang-tri-dien-dan-xenforo-voi-fontawesome-1.png

Đâ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"...
  1. Bước 1: Xác định Navigation ID
    Vào ACP > 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.
  2. 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).
  3. Bước 3: Viết CSS trong extra.less
    Vào ACP > 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;
    }
  4. Nhấn Save và xem kết quả.
trang-tri-dien-dan-xenforo-voi-fontawesome-2.png
Tương tự như trên, chúng ta sẽ dùng CSS để làm đẹp cho danh sách chuyên mục.
  1. 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).
  2. Vào lại template extra.less.
  3. 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;
    }
  4. Nhấn Save.
trang-tri-dien-dan-xenforo-voi-fontawesome-3.png
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.
  1. Vào ACP > Forums > Thread prefixes. Tạo hoặc sửa một tiền tố.
  2. 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.
  3. 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;
    }
  4. Nhấn Save.
trang-tri-dien-dan-xenforo-voi-fontawesome-4.png

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​
 
Back
Top