Sự kiện Việc làm IT

Tạo icon đẹp từ bộ Font Awesome bằng CSS

Danh mục: CSS
 

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 :

.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 :

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

icon, tạo icon, icon awesome

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.



BÀI VIẾT KHÁC
CODE GỢI Ý CHO BẠN
BÌNH LUẬN

BẢN QUYỀN ®
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"