Zone-FM - Cộng Đồng Forumotion Việt Nam Tạo icon từ bộ Font Awesome bằng CSS
Thànhkent
Thànhkent
Quản Trị Viên
Bài Viết : 92
09.07.16 3:02
Thànhkent - Quản Trị Viên
Font Awesome là một web font chứa tất cả các icon từ Twitter Bootstrap framework , bằng cách ấn định giá trị content trong css, các bạn có thể tạo ra các icon theo ý muốn. Giả sử các bạn muốn tạo icon từ phần tử nào, thì chỉ việc khai báo như sau

Code:
.element {
    position: relative;
}
 
/*replace the content value with the
corresponding value from the list below*/
 
.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Và chỉ cần thay đổi giá trị content các bạn có thể tạo ra được các icon như sau

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-1

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-2

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-3

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-4

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-5

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-6

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-7

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-8

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-9

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-10

Tạo icon từ bộ Font Awesome bằng CSS Icon-font-css3-11

Hy vọng với bộ icon này, các bạn sẽ tha hồ mà áp dụng cho web của mình.
Chúc các bạn thành công !

0


Hãy Đăng Nhập Để Gửi Bình Luận - Nếu Chưa Có Tài Khoản Đăng Ký - Click Tại Đây


 

© 2016 Spiderum Themes Cover Forumotion By @Thànhkent