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

shynn

MasterCorporal
Tham gia
18/03/2015
Bài viết
207
Được Like
176
Để 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
Mã:
.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
Untitled.png

--> 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
Mã:
.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
upload_2015-7-1_21-54-32.png


Thành Quả
upload_2015-7-1_21-56-44.png
 

Đính kèm

  • 31012015_username_helper.zip
    1.4 KB · Lượt xem: 60
Sửa lần cuối:

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,735
Được Like
12,681
cũng khá là thú vị cho những ai muốn trang trí cho nick :D
 

Blue

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
909
Được Like
1,528
@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 :)
 
  • Like
Reactions: THB

THB

Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
6,650
Được Like
3,939
Đẹp nhỉ?
Thanks
 

dkinet

Private
Tham gia
09/04/2015
Bài viết
2
Được Like
1
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

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

Kendy

Gefreiter
Tham gia
01/12/2015
Bài viết
93
Được Like
33
thay vì phần content em có thể chèn img được không?
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom