Sử dụng Icons trong bootstrap

Trong bài viết trước mình có nói qua về cách sử dụng bootstrap để xây dựng giao diện website. Ở bài này mình muốn nói thêm về việc sử dụng bộ icons sẵn (Glyphicons) để làm phong phú thêm chỗ các mẫu giao diện website bạn sử dụng.

1. Sử dụng Glyphicons sẵn có.

- Bootstrap có 1 bộ icon khá phong phú, để lựa chọn mẫu icon phù hợp bạn có thể xem chi tiết tại đây.  Khi lựa chọn xong một mẫu icon theo ý muốn, việc thêm nó vào giao diện hết sức đơn giản. Bạn chỉ cần thêm thẻ sau vào vị trí mà bạn muốn icon hiển thị.

<span class="glyphicon glyphicon-search"></span>

- Chú ý ở đây Icon mình thêm là "search" nên class của icon này là "glyphicon-search". Tương ứng với mỗi icon trên danh sách mình nói ở trên sẽ có một class với tên riêng, bạn chỉ cần thay thế cho phù hợp.

2. Sử dụng bộ icons của bên thứ 3.

- Sở dĩ mình giới thiệu thêm phần này vì bộ icon hiện tại mà bootstrap cung cấp tuy nhiều nhưng vẫn chưa thỏa mãn được nhu cầu ^.^. Và trong quá trình sử dụng mình phát hiện glyphincons của bootstrap bị lỗi hiển thị trên IE 10 của Window Phone.

- Bộ icons mình sử dụng ở đây là "Font Awesome Icons", bạn có thể xem tại đây. Để sử dụng bộ icons này, bạn cần thêm đoạn mã này vào phần <heade> của trang, phía dưới link css bootstrap của bạn.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

- Sau khi thêm css vào header, các bạn thêm đoạn mã sau vào phần html bạn cần hiện thị icon.

<i class="fa fa-desktop"></ i>

- Hoàn toàn tương tự như Glyphicons của bootstrap "fa-desktop" là class xác định icon bạn lựa chọn, bạn chỉ cần thay thế class cho phù hợp với nhu cầu sử dụng. Chúc các bạn thành công!

Related Post


Tổng hợp các công cụ kiểm tra website
Monday, October 28, 2013
Một website tốt cần được tối ưu về mã nguồn và hoạt động tốt trên nhiều trình duyệt khác nhau, kiểm tra web là việc cần làm đối với những người thiết kế lập trình web để đảm bảo sản phẩm mình phát triển hoạt động tốt nhất. Trong bài viết này tôi xin giới thiệu một số công cụ kiểm thử website giúp bạn tránh được một số lỗi thường gặp như CSS Errors, HTML Errors, Cross-browsing Errors etc.
Các đơn vị kích thước trong thiết kế web
Monday, September 30, 2013
Trong CSS có khá nhiều đơn vị dùng cho kích thước. Một số có lịch sử từ ngành công nghiệp in ấn như point (pt) hay pica (pc), một số lại rất quen thuộc trong đời sống hàng ngày như cm, mm, in, hoặc là px, em, %,… Vậy điểm khác biệt giữa chúng là gì? Sử dụng chúng trong những trường hợp nào? Bài viết này sẽ làm sáng tỏ phần nào những điều trên.
Search

Đăng ký nhận bài mới


Category

Blog Archive