Hướng dẫn thêm Icon font Awesome trước username và user badge

[shynn]

Để thêm icon font Awesome trước user thì ta cần cài addon Username Helper này. Tiếp theo vào template EXTRA.css thêm đoạn code

.username.user-1 {
    font-weight: bold;
}
.username.user-1:before {
    color: #176093;
    content: "\f21e";
    font-family: FontAwesome;
    padding-right: 2px;
}

Thay số 1 bằng id của user cần thêm icon, phần content thì vào http://fortawesome.github.io/Font-Awesome/icons/ để chọn icon

--> Save lại
Còn thêm icon trước user badge cũng gần tương tự. Vào EXTRA.css thêm code

.userBanner.vip {
color: red;
background-color: yellow;
}
.userBanner.vip:before {
    content: "\f013";
    font-family: FontAwesome;
    padding-right: 4px;
}

Thay vip bằng tên gì tùy thích
Tiếp theo vào Users > Usergroups > Chọn Usergroups nào bạn muốn thêm badge > User Banner Styling chọn other, using custom CSS class name > điền userBanner vip hoặc userBanner ... theo tên bạn thêm ở code trên

Thành Quả

 

[PVS]

cũng khá là thú vị cho những ai muốn trang trí cho nick

 

[Blue]

@shynn ủa, em cần thêm link css của font awesome gắn vào nữa chứ, ko nó sẽ ko hiện đâu

 

[shynn]

@shynn ủa, em cần thêm link css của font awesome gắn vào nữa chứ, ko nó sẽ ko hiện đâu

Phần này chắc ai cũng biết với lại có bài rồi nên em ko thêm vào bài này nữa :v

 

[THB]

Đẹp nhỉ?
Thanks

 

[dkinet]

sao em làm chỉ có mỗi Vip như trên là có color của userbanner còn nhiêu group dù đổi tên vẫn k có màu thế >< ai giúp e với

 

[PVS]

ở trên có đoạn code, bạn phải sửa đoạn đó phù hợp với group của bạn đã nha

 

[dkinet]

e làm được rồi bác thanks nhiều

 

[Kendy]

thay vì phần content em có thể chèn img được không?