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

Thảo luận trong 'Tips and Guides' bắt đầu bởi shynn, 01/07/2015.

  1. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    Để 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
     

    Các file đính kèm:

    Chỉnh sửa cuối: 13/07/2015
  2. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    cũng khá là thú vị cho những ai muốn trang trí cho nick :D
     
    shynn thích bài này.
  3. Blue

    Blue Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    796
    Đã được thích:
    1,246
    Điểm thành tích:
    93
    Giới tính:
    Nam
    @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 :)
     
    THB thích bài này.
  4. shynn

    shynn Thượng Đế

    Tham gia:
    18/03/2015
    Bài viết:
    207
    Đã được thích:
    171
    Điểm thành tích:
    43
    Giới tính:
    Nam
    Nghề nghiệp:
    Học Sinh
    Nơi ở:
    Nghệ An
    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 and Mr.Yellow like this.
  5. THB

    THB Admin - Founder Thành viên BQT

    Tham gia:
    25/02/2015
    Bài viết:
    6,336
    Đã được thích:
    3,550
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    CEO
    Nơi ở:
    Bình Dương
    Web:
    Đẹp nhỉ?
    Thanks
     
    shynn thích bài này.
  6. dkinet

    dkinet Thượng Đế

    Tham gia:
    09/04/2015
    Bài viết:
    2
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nữ
    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
     
  7. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,804
    Đã được thích:
    7,062
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    ở 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 thích bài này.
  8. dkinet

    dkinet Thượng Đế

    Tham gia:
    09/04/2015
    Bài viết:
    2
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nữ
    e làm được rồi bác :D thanks nhiều
     
    shynn thích bài này.
  9. Kendy

    Kendy Thượng Đế

    Tham gia:
    01/12/2015
    Bài viết:
    91
    Đã được thích:
    32
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Nơi ở:
    Thành phố hồ chí minh
    thay vì phần content em có thể chèn img được không?
     

Chia sẻ trang này