Bạn muốn yêu cầu phần mềm, khóa học hay kiến thức gì hãy liên hệ ngay Hợp tác cùng phát triển nhé !

Cách chỉnh sửa và thay đổi icon menu Template Median UI

Cách chỉnh sửa và thay đổi icon menu Template Median UI

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'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.

About the Author

Founder và CEO tại Minh CRISTIANO Blog. Tại đây, mình sẽ chia sẻ một số kiến thức học tập, các phần mềm liên quan & các thông báo quan trọng của blog.

Đăng nhận xét

MỘT SỐ LƯU Ý KHI BÌNH LUẬN
- Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem Nội quy)

- Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

- Để bình luận kèm hình ảnh, bạn hãy vào trang Upload ảnh sau đó kéo thả để upload hình ảnh lên.

- Không spam trong khung bình luận, hạn chế viết tắt..
Cookie Consent
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Xem chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối internet của bạn. Vui lòng kết nối với internet và tiếp tục trải nghiệm của bạn.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý blog này, chúng tôi yêu cầu bạn đưa blog của chúng tôi vào danh sách bỏ chặn trong plugin chặn quảng cáo của bạn.
Site is Blocked
Xin lỗi ! Blog này không khả dụng ở quốc gia của bạn.