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

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top