Hướng dẫn Mod icon tuyệt đẹp cho Xenforo

Admin

Administrator
Thành viên BQT
#1
Hướng dẫn Mod icon tuyệt đẹp cho Xenforo

Cách làm:
1. Download file đính kèm về
2. Giải nén ra up cả forder giải nén được lên ngang hàng với index.php
3. Vào Templates-->PAGE_CONTAINER chèn code sau trong thẻ <head>
Mã:
<link href="http://link của bạn/font-awesome/css/font-awesome.css" rel="stylesheet">
Đây chính là thủ thuật
Tạo icon từ bộ Font Awesome bằng CSS
List icon bạn có thể sử dụng:

icon-font-css3-1.jpg icon-font-css3-2.jpg icon-font-css3-3.jpg icon-font-css3-4.jpg icon-font-css3-5.jpg icon-font-css3-6.jpg icon-font-css3-7.jpg icon-font-css3-8.jpg icon-font-css3-9.jpg icon-font-css3-10.jpg icon-font-css3-11.jpg
Để thêm icon các bạn vào Templates-->navigation_visitor_tab
và tìm các vị trí tương ứng:
Ví dụ: bạn tìm:
Mã:
<xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}">{xen:phrase personal_details}</a></li></xen:if>
Đây chính là đoạn "Chi tiết Cá Nhân" trong ảnh demo:
để thêm icon thì bạn thêm
Mã:
<i class="icon-user icon-large icon-fixed-width" style="margin-right:1px;"></i>
Vào trước
Mã:
{xen:phrase personal_details}
Ta được
Mã:
<xen:if is="{$canEditProfile}"><li><a href="{xen:link account/personal-details}"><i class="icon-user icon-large icon-fixed-width" style="margin-right:1px;"></i>{xen:phrase personal_details}</a></li></xen:if>
Còn những cái khác bạn thêm tương tự như vậy
Chú ý: "icon-user" trong code thêm vào là mã của icon
Bạn có thể chọn icon tùy thích trên mấy ảnh trên để thay vào.

Demo:

1.PNG

Trước khi thêm icon

2.PNG

Sau khi thêm icon

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


Nguồn: 4vnn.com​
 

Đính kèm

Top