Các icon trên Template Median UI đều sử dụng hình ảnh SVG, chính vì vậy để thay được các icon này chúng ta cần sử dụng hình ảnh SVG. Ảnh SVG là 1 định dạng ảnh ở dạng code chứ không phải như ảnh thông thường.
Bạn có thể tham khảo rất nhiều nguồn ảnh SVG từ Google hoặc lấy 1 số tại đây.
Bước 1: Để thay ảnh của menu bạn vào chỉnh sửa teamplate và tìm đến đoạn sau:
<!--[ Dropdown style 1 ]-->
<li class='drp'>
<input class='drpI hidden' id='drpDwn-1' name='drpDwn' type='checkbox' />
<label class='a' for='drpDwn-1'>
<!--[ Icon ]-->
<b:include name='folder-icon' />
<!--[ Title navigation ]-->
<span class='n'>Sub menu</span>
<b:include name='arow-down-icon' />
</label>
<ul>
<!--[ Change attribute href='#' to add url ]-->
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 01</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 02</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 03</a></li>
<li itemprop='name'><a href='#' itemprop='url'>Sub menu 04</a></li>
</ul>
</li>
Trong đó bạn cần thay đổi id='drpDwn-1' và for='drpDwn-1' thành 2 nếu có 2 Dropdown menu và 3 nếu có 3...
Tại dòng <b:include name='folder-icon' /> bạn cần thay đổi folder-icon thành tên icon muốn thay đổi. Hơi khó hiểu đúng không, thay đổi cái tên mà lại thành cái icon khác, kệ nó đi bạn sẽ hiểu nó ở phần sau.
Ví dụ tôi muốn đổi icon thành và tôi muốn đặt tên cho icon này là play-icon thì nó sẽ như thế này <b:include name='play-icon' />
Bước 2: Tiếp theo hãy tìm đến đoạn này <!--[ SVG Icon ]--> bạn sẽ thấy ngay bên dưới nó chính là các đoạn code khai báo và chèn ảnh SVG vào.
Cả đoạn nó có dạng như sau, hãy copy để nhân bản cả đoạn lên sau đó chúng ta sẽ thay các thông số.
<b:includable id='back-icon'>
<!--[ Back icon ]-->
<svg class='line' viewBox='0 0 24 24'>
<g transform='translate(12.000000, 12.000000) rotate(-270.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'>
<path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0' />
</g>
</svg>
</b:includable>
Thay back-icon thành play-icon, thay cả đoạn <svg class='line' ... </svg> bằng đoạn code ảnh SVG đã chuẩn bị sẵn, sau khi thay xong nó như thế này:
<b:includable id='play-icon'>
<!--[ Play icon ]-->
<svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M30,12a5.71,5.71,0,0,0-5.31-5.7C18.92,6,13.06,6,7.33,6.28,4.51,6.28,2,9,2,12a43.69,43.69,0,0,0,0,8.72,5.32,5.32,0,0,0,5.28,5.33h0q4.35.24,8.72.24t8.67-.23A5.34,5.34,0,0,0,30,20.8,31.67,31.67,0,0,0,30,12Zm-2,8.63a.49.49,0,0,0,0,.12,3.36,3.36,0,0,1-3.39,3.34,166,166,0,0,1-17.28,0A3.36,3.36,0,0,1,4,20.65a42,42,0,0,1,0-8.47.45.45,0,0,0,0-.11A3.78,3.78,0,0,1,7.38,8.28c2.86-.13,5.74-.19,8.62-.19s5.76.06,8.62.19h.05c1.71,0,3.33,1.84,3.33,3.79a.76.76,0,0,0,0,.15A30.11,30.11,0,0,1,28,20.61Z"><path d="M20.79,15.51l-7.14-3.68a1,1,0,1,0-.92,1.78l5.43,2.79-4,2.07V16.4a1,1,0,0,0-2,0v3.72a1,1,0,0,0,1,1,1,1,0,0,0,.46-.11l7.14-3.72a1,1,0,0,0,.54-.89A1,1,0,0,0,20.79,15.51Z"></path></path></g></svg>
</b:includable>
Vậy là OK rồi, lưu lại và xem ảnh menu đã đổi chưa nhé. Trường hợp menu tự dưng biến mất luôn là do id ảnh bạn đặt không trùng nhau, hãy kiểm tra lại cho chính xác.
Với các ảnh của menu khác làm tương tự, chỉ cần đặt chính xác tên ảnh tại <b:include name='folder-icon' /> là được.