free web
free web
free web
Home » Files » Thủ thuật web » 28.Oct.2017, 6:04 AM

Tạo icon từ bộ Font Awesome bằng CSS
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:
Copy
 
.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:











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 !

Từ khóa: code tao bo icon tu bo font cua may tinh, huong dan lam icon bang lenh css, tao icon cho web khong can hinh anh, cach tao bo icon ma khong can dung photoshop, ung dung icon cua Font Awesome cho web,


Bài viết coppy từ webmaster

Lưu Ý:
  • Khi bạn để lại bình luận vui lòng không spam, không dùng những từ ngữ thô tục lăng mạ người khác.
  • Các bài viết trên iFox chỉ mang tính chất chia sẻ thông tin tham khảo, các bạn nên cân nhắc kỹ lưỡng trước khi xem hoặc tải nội dung bài viết, cẩn thận lừa đảo và virut.
  • Chúng tôi sẽ không chịu trách nhiệm với các bài viết do thành viên đăng lên trên các kênh của iFox.
  • Nếu trường hợp bạn phát hiện bài viết là hình thức lừa đảo hoặc nội dung bài viết sai thực tế, bạn vui lòng gửi báo cáo tới admin để được giải quyết, chúng tôi sẽ xử lý nghiêm các bài viết vi phạm.
  • iFox Media luôn hướng tới mục tiêu cộng đồng giao lưu vui vẻ, lịch sự, nhiệt tình.
  • Hãy để lại cảm nhận của bạn, chúng tôi vui vẻ đón nhận và sẽ cố gắng phát huy trang web một cách tốt nhất để phục vụ các bạn.
  • Cảm ơn bạn đã quan tâm và ủng hộ iFox Media, chúc bạn một ngày làm việc hiệu quả!
Category: Thủ thuật web | Added by: Bom_cute36 | Tags: website, JavaScript, css, HTML, code
Số tin nhắn: 0
avatar