Làm Wap/Web đẹp và bắt mắt hơn với icon của Font Awesome và Bootstrap

» Diễn đàn » Wap, Web » HTML / CSS / JAVASCRIPT

1 2 Sau»

13:38 / 19.08.2016

LeYTi

Mod

7636

484

668376

42

Fairy Dragon icon

Chắc hẳn 90% người làm wapmaster rất thích những icon độc đáo và chèn vào mọi nơi trên trang, chẳng hạn các icon nằm kế bên các dòng chữ chẳng hạn.

Hôm nay mình sẽ chia sẻ cho các bạn cách sử dụng và cách làm sao để hiện icon. Đặc biệt ở đây thì các bạn không cần phải cao chạy xa bay đi đâu mà đi tìm các icon đẹp để chèn vào wap dưới dạng hình ảnh.Chúng ta sử dụng Font Awesome và Bootstrap thôi (Kiểu như Font và CSS) chỉ cần các bạn làm các bước sau:

Cách 1 Chèn mã sau vào wap:
''.highlight(' <link rel="stylesheet" type="text/css" href="http://vnmaster.yn.lt/css/bootstrap.min.css" media="all,handheld"/>').''
Lưu ý: không copy <? php và ?>. Xóa <a href=\" và thêm " sau min.css (thành min.css" )

Cách 1.2 Chèn mã sau vào head:
''.highlight('<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">').''
Hoặc bản max nhẹ, chỉ có icon, cải thiện load wap lâu: (khuyên dùng)
''.highlight(' <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">').''
Lưu ý: không copy <? php và ?>

Cách 2: Tải hoặc copy toàn bộ nội dung ở VnMaster hoặc MaxCDN-BoostrapCSN rồi dán vào một file nào đó. Sau đó dùng code sau để chèn vào wap:
Mã:

Lưu ý: thay Link Font Awesome & Bootstrap thành link dẫn tới file mà bạn tải về (file copy)

Cách 3: Vào trang chủ của Font Awesome & Bootstrap để tải về

Cách sử dụng: Sau khi đã tải các bước trên xong, bạn có thể chèn icon bằng cách dùng mã

Các bạn thay IDNAME thành tên của icon vào (Vd: <i class="fa fa-home"></i> ). Xem danh sách tên icon tại đây. Xem Demo tại đây. Ngoài ra vẫn còn nhiều tính năng khác (các bạn tự tìm hiểu nhé

).

Hãy sử dụng sản phẩm này, với hơn 600 icon đã được thiết kế, bạn không cần phải đi đâu mà tìm mà mất thời gian. Tự tùy biến màu icon cho phù hợp với trang (Vd: bạn đặt icon Home ở lớp phdr với màu nền là Black thì icon sẽ tự động chuyển màu thành White).

Còn chần chờ gì mà không nhanh tay sử dụng

(@Admin test phát)

Nguồn: VnMaster
Biên soạn bởi: LeYTi (Vui lòng leech ghi rõ người biên soạn và nguồn)

Hoặc bản max nhẹ, chỉ có icon, cải thiện load wap lâu: (khuyên dùng)
''.highlight(' <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">').''
Đã chỉnh sửa. LeYTi (15:43 / 04.09.2016) [6]

[Like 4]:

Hoangthien,

b0y,