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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
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

  • font_awesome_wmDAZ.zip
    268.9 KB · Lượt xem: 22

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
cái này đâu có đính kèm đâu bạn @@
 

quocmanh9411

Private
Tham gia
29/08/2015
Bài viết
20
Được Like
11
cái này đâu có đính kèm đâu bạn @@
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>

vậy download file nào @@!
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
chết, ham nhìn code mà không đọc lại bài, sr bạn :D, update file đính kèm rồi á
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
cái này phải làm từ từ từng cái và bạn phải hiểu code của nó như thế nào mới biết chỗ mà thêm được
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
trước tiên bạn nên làm quen xenforo cho kỹ đã, sau khi quen thuộc thì mới dễ dàng làm mấy cái này được, vì hướng dẫn ở trên cũng không khó mà @@
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom