Tutorial 2x "Tân trang" Diễn đàn XenForo 2.3 với Bootstrap Icons và SVG tùy chỉnh

[PVS]

"Tân trang" Diễn đàn XenForo 2.3 với Bootstrap Icons và SVG tùy chỉnh

Font Awesome là một công cụ tuyệt vời, nhưng nó đã trở nên quá phổ biến và đôi khi không đủ linh hoạt. Nếu bạn muốn diễn đàn của mình có một diện mạo độc đáo, hiện đại và sắc nét hơn, đã đến lúc tìm hiểu về hai công nghệ thay thế mạnh mẽ: thư viện Bootstrap Icons và ảnh vector SVG.

SVG (Scalable Vector Graphics) là định dạng ảnh vector, có nghĩa là icon của bạn sẽ luôn sắc nét dù ở bất kỳ kích thước nào. Quan trọng hơn, bạn có thể dễ dàng thay đổi màu sắc của chúng bằng CSS. Bài viết này sẽ hướng dẫn bạn từng bước tích hợp Bootstrap Icons và cách sử dụng SVG để thay thế các icon mặc định của node, mang lại một làn gió mới cho giao diện diễn đàn.

Tích hợp thư viện Bootstrap Icons​

Bootstrap Icons là một bộ thư viện icon miễn phí, mã nguồn mở với hơn 2000 icon được thiết kế theo phong cách hiện đại. Việc tích hợp cực kỳ đơn giản.

Bước 1: Lấy liên kết CDN​

Truy cập trang chủ của Bootstrap Icons (https://icons.getbootstrap.com/) và tìm đến mục Install/CDN. Sao chép thẻ <link> họ cung cấp. Nó sẽ có dạng như sau:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Bước 2: Chèn vào Template của XenForo​

1. Truy cập AdminCP > Appearance > Style bạn đang sử dụng > Templates.
2. Tìm và mở template PAGE_CONTAINER.
3. Dán thẻ <link> bạn vừa sao chép vào ngay bên trên thẻ </head>.
4. Lưu lại.

Bước 3: Sử dụng Icon​

Bây giờ, bạn đã có thể sử dụng bất kỳ icon nào trong thư viện.

1. Truy cập lại trang chủ Bootstrap Icons, tìm một icon bạn thích (ví dụ: chat-left-dots-fill).
2. Sao chép đoạn mã HTML của nó, ví dụ: <i class="bi bi-chat-left-dots-fill"></i>.
3. Bạn có thể dán mã này vào bất cứ đâu hỗ trợ HTML, như trong mục Notices, Widget HTML, hoặc tạo BB Code tùy chỉnh.

Thay thế Node Icons bằng ảnh SVG​

Đây là phần "ăn tiền" của thủ thuật, giúp bạn thay thế các icon hình ảnh mờ nhạt của chuyên mục bằng các icon SVG sắc nét và có thể đổi màu.

Bước 1: Chuẩn bị mã SVG của bạn​

1. Tìm icon: Truy cập các thư viện SVG chất lượng như Tabler Icons, Phosphor Icons, hoặc chính trang Bootstrap Icons (họ cũng cung cấp file SVG).
2. Lấy mã: Chọn một icon bạn thích và tải về file .svg của nó. Mở file này bằng một trình soạn thảo văn bản (như Notepad++ hoặc VS Code) và sao chép toàn bộ nội dung code bên trong (bắt đầu bằng <svg...> và kết thúc bằng </svg>).

Bước 2: Mã hóa SVG và viết CSS​

Để chèn SVG vào CSS, chúng ta cần mã hóa nó thành một định dạng mà trình duyệt có thể đọc được trong CSS.

1. Mã hóa SVG: Truy cập một công cụ online như URL Encoder for SVG. Dán toàn bộ mã SVG của bạn vào và sao chép kết quả đã được mã hóa. Kết quả sẽ rất dài và bắt đầu bằng data:image/svg+xml,....
2. Viết CSS:
   • Truy cập AdminCP > Appearance > Style bạn đang sử dụng > Templates và tạo một template mới trong style của bạn, đặt tên là _custom_icons.less.
   • Dán đoạn mã CSS sau vào template vừa tạo:
     

     // Thay thế icon cho Node có ID là 2
     .node--id2 .node-icon i {
         // Ẩn icon mặc định của XenForo
         display: none;
     }
     
     .node--id2 .node-icon::before {
         content: '';
         display: inline-block;
         width: 36px;      // Giữ nguyên kích thước mặc định
         height: 36px;     // hoặc thay đổi tùy ý
        
         // Đây là màu icon bạn muốn
         background-color: rgb(25, 118, 210);
     
         // Dán SVG đã mã hóa vào đây
         -webkit-mask: url("DÁN_SVG_ĐÃ_MÃ_HÓA_VÀO_ĐÂY") no-repeat center;
         mask: url("DÁN_SVG_ĐÃ_MÃ_HÓA_VÀO_ĐÂY") no-repeat center;
     }

   • 
     Lưu ý:
     • Thay .node--id2 bằng ID của node bạn muốn thay đổi. Bạn có thể tìm thấy ID này trong URL khi sửa node trong AdminCP.
     • Thay đổi background-color thành màu bạn muốn.
     • Dán chuỗi SVG đã mã hóa của bạn vào đúng vị trí trong url("...").

Bước 3: Import template CSS​

Để các đoạn mã CSS trên có hiệu lực, bạn cần "gọi" nó.

1. Tìm và mở template core.less.
2. Thêm dòng sau vào cuối cùng của template:
   @import "_custom_icons.less";
3. Lưu lại và kiểm tra kết quả ngoài forum.

Nâng cao: Đổi màu Icon khi di chuột​

Sức mạnh của SVG là đây. Bạn chỉ cần thêm một vài dòng CSS vào file _custom_icons.less để tạo hiệu ứng.

// Thêm hiệu ứng hover cho icon của Node ID 2
.node--id2:hover .node-icon::before {
    background-color: @xf-linkColor; // Tự động lấy màu link của theme
}

Kết luận​

Bằng cách kết hợp thư viện Bootstrap Icons và sức mạnh của SVG, bạn đã có trong tay một bộ công cụ mạnh mẽ để tùy biến giao diện diễn đàn. Các icon giờ đây không chỉ đẹp, hiện đại, sắc nét, mà còn có thể thay đổi màu sắc linh hoạt theo từng theme hoặc tương tác của người dùng. Đây là một thủ thuật nhỏ nhưng mang lại hiệu quả thị giác rất lớn, giúp cộng đồng của bạn nổi bật giữa đám đông.

Chúc các bạn thành công.

VNXF.VN​