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

Discussion in 'Tips and Guides' started by shynn, Jul 1, 2015.

  1. shynn

    shynn Thượng Đế

    Joined:
    Mar 18, 2015
    Messages:
    207
    Likes Received:
    171
    Trophy Points:
    43
    Gender:
    Male
    Occupation:
    Học Sinh
    Location:
    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
    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 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
    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
    upload_2015-7-1_21-54-32.png

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

    Attached Files:

    Last edited: Jul 13, 2015
  2. PVS

    PVS Cộng Sự Đặc Biệt Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,811
    Likes Received:
    7,063
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    cũng khá là thú vị cho những ai muốn trang trí cho nick :D
     
    shynn likes this.
  3. Blue

    Blue Admin - Founder Staff Member

    Joined:
    Feb 25, 2015
    Messages:
    796
    Likes Received:
    1,246
    Trophy Points:
    93
    Gender:
    Male
    @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 likes this.
  4. shynn

    shynn Thượng Đế

    Joined:
    Mar 18, 2015
    Messages:
    207
    Likes Received:
    171
    Trophy Points:
    43
    Gender:
    Male
    Occupation:
    Học Sinh
    Location:
    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 Staff Member

    Joined:
    Feb 25, 2015
    Messages:
    6,336
    Likes Received:
    3,550
    Trophy Points:
    113
    Gender:
    Male
    Occupation:
    CEO
    Location:
    Bình Dương
    Home Page:
    Đẹp nhỉ?
    Thanks
     
    shynn likes this.
  6. dkinet

    dkinet Thượng Đế

    Joined:
    Apr 9, 2015
    Messages:
    2
    Likes Received:
    1
    Trophy Points:
    3
    Gender:
    Female
    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 Staff Member

    Joined:
    Feb 28, 2015
    Messages:
    11,811
    Likes Received:
    7,063
    Trophy Points:
    113
    Gender:
    Male
    Location:
    Huế
    Home Page:
    ở 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 likes this.
  8. dkinet

    dkinet Thượng Đế

    Joined:
    Apr 9, 2015
    Messages:
    2
    Likes Received:
    1
    Trophy Points:
    3
    Gender:
    Female
    e làm được rồi bác :D thanks nhiều
     
    shynn likes this.
  9. Kendy

    Kendy Thượng Đế

    Joined:
    Dec 1, 2015
    Messages:
    91
    Likes Received:
    32
    Trophy Points:
    18
    Gender:
    Male
    Location:
    Thành phố hồ chí minh
    thay vì phần content em có thể chèn img được không?
     

Share This Page