Cách Đơn Giản Để Thêm Icon Danh Mục Vào Giao Diện Phiên Bản Mobile
Ngày nay, có rất nhiều người đang lướt web qua các thiết bị di
động, do đó một vài điều trên trang web cần phải được điều chỉnh để phù
hợp với những kích cỡ màn hình nhỏ hơn. Điều này bao gồm Web Navigation (
danh mục ).
Biểu tượng dưới đây là biểu tượng phổ biến nhất đại diện cho “mobile menu/navigation”:
Trong bài viết này, chúng ta sẽ có một số cách để thêm vào các navigation icon dễ dàng nhất.
Tuy nhiên, hình ảnh bitmap sẽ thiếu khả năng mở rộng. Đặc biệt, khi chúng ta phóng to hình ảnh, nó có thể bị mờ hoặc bị bể. Với các thiết bị có độ phân giải rất cao trên thị trường ngày nay, khả năng mở rộng hình ảnh là một trong những yếu tố quan trọng mà bạn không thể bỏ qua.
Một số lợi thế của việc hiển thị icon với font chữ là các icon rất dễ dàng thay đổi thông qua CSS và có độ phân giải độc lập. Mặt khác, nó cũng có một số nhược điểm: các tập tin có thể là rất lớn phụ thuộc vào bao nhiêu ký tự được lưu lại, và chúng ta cần ít nhất bốn định dạng tập tin khác nhau bao gồm khả năng tương thích trình duyệt, đó là một số việc để chỉ hiển thị một biểu tượng.
Sau đó chúng ta có thể thay đổi nó với CSS, chẳng hạn như thay đổi màu sắc hoặc kích thước mà không sợ làm mất đi độ sắc nét của nó. Hơn nữa, bạn có thể vào thư viện này để tìm hiểu thêm nhiều ký tự đặc biệt khác của HTML.
Biểu tượng dưới đây là biểu tượng phổ biến nhất đại diện cho “mobile menu/navigation”:
Trong bài viết này, chúng ta sẽ có một số cách để thêm vào các navigation icon dễ dàng nhất.
Sử Dụng Hình Ảnh Bitmap
Mọi người đều biết làm thế nào để tạo ra một hình ảnh Bitmap. Chúng ta chỉ đơn giản tạo ra biểu tượng này trong Photoshop, lưu nó lại ( có thể là PNG hoặc JPG ) và sau đó gắn nó vào thuộc tínhbackground-image trong CSS.Tuy nhiên, hình ảnh bitmap sẽ thiếu khả năng mở rộng. Đặc biệt, khi chúng ta phóng to hình ảnh, nó có thể bị mờ hoặc bị bể. Với các thiết bị có độ phân giải rất cao trên thị trường ngày nay, khả năng mở rộng hình ảnh là một trong những yếu tố quan trọng mà bạn không thể bỏ qua.
Sử Dụng Bootstrap
Bằng cách sử dụng Bootstrap ( một front-end development framework ), “navigation icon” sẽ hiển thị trong các màn hình kích cỡ nhỏ hơn. Nó sử dụng ba yếu tố<span>:<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Mặc dù biểu tượng mong muốn có thể đạt được thông qua style, nhưng
chỉ hiển thị biểu tượng nhỏ. Vì vậy, chúng ta hãy tìm một cách tốt hơn.Sử Dụng Font Icon
Một cách khác để thực hiện là bằng cách sử dụng font icon. Một số font chữ cung cấp các biểu tượng này trong thiết lập của chúng, chẳng hạn như Font Awesome và EnTypo. Để hiển thị các biểu tượng, chúng ta đơn giản là thêm các ký tự tương ứng, như thể hiện trong bài viết này.Một số lợi thế của việc hiển thị icon với font chữ là các icon rất dễ dàng thay đổi thông qua CSS và có độ phân giải độc lập. Mặt khác, nó cũng có một số nhược điểm: các tập tin có thể là rất lớn phụ thuộc vào bao nhiêu ký tự được lưu lại, và chúng ta cần ít nhất bốn định dạng tập tin khác nhau bao gồm khả năng tương thích trình duyệt, đó là một số việc để chỉ hiển thị một biểu tượng.
“Trigram For Heaven”
Đáng ngạc nhiên, có một ký tự trong HTML được gọi là Trigram For Heaven. Đây ( có thể ) là cách tốt nhất mà mình có thể đã tìm thấy. Đơn giản chỉ cần thêm vào HTML (☰ ) và bạn sẽ thấy được biểu tượng này trên web của bạn.Sau đó chúng ta có thể thay đổi nó với CSS, chẳng hạn như thay đổi màu sắc hoặc kích thước mà không sợ làm mất đi độ sắc nét của nó. Hơn nữa, bạn có thể vào thư viện này để tìm hiểu thêm nhiều ký tự đặc biệt khác của HTML.
