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

shynn

Thượng Đế
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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,210
Được Like
11,621
cũng khá là thú vị cho những ai muốn trang trí cho nick :D
 

Blue

Admin - Founder
Thành viên BQT
Tham gia
25/02/2015
Bài viết
883
Được Like
1,482
@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

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

dkinet

Thượng Đế
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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,210
Được Like
11,621
ở 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

Thượng Đế
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

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom