Hướng dẫn sử dụng Font Awesome làm icon cho menu nukeviet

Font Awesome là một bộ font end dùng làm icon thịnh hành nhất hiện nay và chính vì nó tiện lợi với nhiều kiểu icon khác nhau cũng như giảm lượng tải trang web mà vì thế nó đã được tích hợp vào trong mã nguồn NukeViet. Nhưng khi tích hợp vào trong NukeViet thì nhiều bạn sẽ gặp phải vấn đề là muốn sử dụng icon font này ở menu sao cho mỗi menu là một icon thay vì bị dùng chung thì cách giải quyết cũng khá là đơn giản.

Cách giải quyết đó là tất cả các menu sử dụng trực tiếp như category trong module shops hay module news bạn có thể chuyển qua module menu và tiếp đến sử dụng câu lệnh php để lấy ra theo đúng ý muốn sao cho hợp lý. Vì tính năng đặc biệt đó là cho phép bạn thêm “Tên lớp CSS“. Với nó bạn chỉ cần chú ý chút là có thể tùy biến từng menu trong menu website hiển thị icon theo ý của bạn. Để dễ hiểu hơn mình trình bày các bước như sau.

Với module menu thì bạn còn có thể tùy biến đủ kiểu và mình đã và đang sử dụng như không sử dụng icon font mà thay vào đó sử dụng hình ảnh cho từng menu cũng được và sẽ có bài viết khác hướng dẫn các bạn.

Lưu ý có thể bạn làm đảo lộn thứ tự cũng được, vì nó cũng cùng ra kết quả là icon font cho từng menu trong module menu.

Các bước thực hiện

1. Điều đầu tiên bạn sẽ cần để ý tới đó là bảng nv4_vi_menu_rows có một trường đó là css như hình sau và đó là nơi lưu tên của class css.
   Để mình giải thích thêm đó là khi bạn thực hiện thêm “tên lớp css” hoặc viết một đoạn text vào đó nó sẽ lưu vào trường css như hình trên.
2. Tiếp theo bạn vào module menu và thêm menu cho khối menu và nhớ thêm class css vào phần “Tên lớp css” trong module menu khi bạn thêm từng thành phần memu.
   
3. Nhưng để dễ dàng hơn thì bạn cần truy cập trang http://fontawesome.io/icons/ và chọn một icon thích hợp cho menu sau đó thì mở nó sang một trang mới để có được đoạn mã của Font Awesome như sau.

   
   <i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i>
   
   

4. Với đoạn mã trên 1 là bạn có thể paste thẳng vào “Tên lớp css”, 2 là bạn chỉ lấy đoạn class “fa-american-sign-language-interpreting” để sử dụng, còn đoạn mã còn lại bạn cho vào file .tpl chứa mã html. Mình thì thường làm theo cách 2 hơn là paste vào để tránh đẩy vào cơ sở dữ liệu quá nhiều.
5. Tiếp theo nữa là bạn quay trở về block menu mà bạn sử dụng kiểm tra xem đã có truy vấn tới trường “css” hay chưa? Nếu chưa có thì viết thêm vào để nó gọi trường này (chỗ này thuộc php lên mình không nói chi tiết).
6. Sau khi bạn thêm truy vấn vào trường “css” thì lúc này câu lệnh truy vấn sẽ cho ra kết quả là mảng và có thêm trường “css” nhưng bạn cần làm theo như sau để kiểm tra tính tồn tại nếu trường css có dữ liệu thì mới thực hiện và ngược lại.

   if (! empty($item['css'])) {
   $xtpl->parse('main.top_menu.css');
   }
   

   Bạn thay $item bằng biến của bạn và thay main.top_menu.css thành ý của bạn như bạn đang sử dụng.

7. Tiếp đến trong phần html thì bạn cần viết nhứ sau:

   <!-- BEGIN: css -->
   <i class="fa {ROW.css}" aria-hidden="true"></i>
   <!-- END: css -->
   

   Lưu ý là bạn cần đặt đoạn mã code trên vào trong đoạn mở và kết thúc của top_menu (cái mà bạn đang sử dụng). {ROW.css} thành phần hiển thị nội dung của trường css. Nếu bạn paste nguyên code thì bỏ đoạn mã trên đi và chỉ việc điền {ROW.css} vào trong đoạn đóng mở là được.

8. Sau đó lưu lại và ra ngoài site xem kết quả.

Sau khi hoàn tất thì mình được menu theo ý muốn, có class css thì nó sẽ có icon bằng font và không có class css thì nó trống không như sau:

Các bước thực hiện chỉ có như vậy, cũng không khó khăn gì nếu bạn biết cách xài cũng như biết php là được. Mọi thắc mắc xin mời các bạn để lại bình luận dưới bài viết để được giải đáp kịp thời.