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

Để 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

CODE:

Select All

.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àohttp://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

CODE:

Select All

.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ả