Thêm Icons vào Navbar của forum Xenforo 2

Mình xin được chia sẻ thêm một thủ thuật xenforo nữa, giúp bạn làm đẹp hơn cho forum xenforo của bạn. Trong bài viết này mình sẽ giúp bạn làm sinh động hơn cho thanh navbar bằng cách thêm các icons đằng trước các menu, sử dụng Font Awesome

Thêm icons vào navbar của xenforo 2
Thêm icons vào navbar của xenforo 2

Cách làm thì cũng tương tự như ở bài viết trước, thêm code css vào extra.less

Đây là hình ảnh thanh navbar trước khi thêm code css

navbar xenforo
navbar xenforo

Sau khi thêm code CSS sẽ thành như thế này

navbar xenforo
navbar xenforo sau khi theme code

Bạn chỉ cần copy y nội  dung bên dưới và cho vào file extra.less là được.

.p-navEl a::before{
font-family: 'Font Awesome 5 Pro';
padding-right: 5px;
}

.p-navEl a[data-nav-id="home"]::before{content: "\f015";}
.p-navEl a[data-nav-id="forums"]::before{content: "\f27a";}
.p-navEl a[data-nav-id="whatsNew"]::before{content: "\f0e7";}
.p-navEl a[data-nav-id="xfmg"]::before{content: "\f030";}
.p-navEl a[data-nav-id="xfrm"]::before{content: "\f019";}
.p-navEl a[data-nav-id="members"]::before{content: "\f0c0";}
.p-navEl a[data-nav-id="newPosts"]::before{content: "\f005";}
.p-navEl a[data-nav-id="findThreads"]::before{content: "\f00e";}
.p-navEl a[data-nav-id="watched"]::before{content: "\f06e";}
.p-navEl a[data-nav-id="searchForums"]::before{content: "\f002";}
.p-navEl a[data-nav-id="markForumsRead"]::before{content: "\f070";}

Nếu bạn muốn thay  đổi các icon thì bạn chỉ cần thay phần content phù hợp là được. Bạn có thể xem các icons và content thay thế tại đây

Chúc bạn thành công, có gì không hiểu thì comment lại cho mình nhé

Leave a Reply

avatar
  Subscribe  
Notify of