{"id":21013,"date":"2021-12-25T06:00:00","date_gmt":"2021-12-25T01:00:00","guid":{"rendered":"https:\/\/mcstarters.com\/blog\/?p=21013"},"modified":"2025-07-12T19:40:05","modified_gmt":"2025-07-12T14:40:05","slug":"change-elementor-default-hamburger-menu-icon","status":"publish","type":"post","link":"https:\/\/mcstarters.com\/blog\/change-elementor-default-hamburger-menu-icon\/","title":{"rendered":"How to Change Elementor Default Hamburger Menu Icon"},"content":{"rendered":"\n<p>Elementor is a fantastic page builder, and&nbsp;it is the most popular page builder for WordPress. They have hundreds of Elementor header, footer and full page templates.<\/p>\n\n\n\n<p class=\"bg-light\">Download Free<strong> <a href=\"https:\/\/mcstarters.com\/free-elementor-templates\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/free-elementor-templates\/\" rel=\"noreferrer noopener\">Elementor Templates<\/a><\/strong> and Make Website in Less Time and without coding.<\/p>\n\n\n\n<p><a  class=\"btl_autolink_hyperlink\"  href=\"https:\/\/mcstarters.com\/blog\/elementor-pro\"    target=\"_blank\" rel=\"nofollow\">Elementor Pro<\/a> comes with a header builder. With header builder, we easily add menus, logos, and icons. But some developers want to Change Elementor Default hamburger Menu Icon into custom icons, custom images, and text.&nbsp;<\/p>\n\n\n\n<p class=\"bg-light\">Get Best Page Builder:  <a href=\"https:\/\/mcstarters.com\/go\/elementor\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/go\/elementor\" rel=\"noreferrer noopener\">Elementor Pro<\/a> <\/p>\n\n\n\n<p>In this post, I will show you how to change an elementor hamburger menu icon without having to use a plugin.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-text-to-elementor-hamburger-menu-icon\">Add Text to Elementor Hamburger Menu Icon<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"313\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/Add-Text-to-Elementor-Hamburger-Menu-Icon.webp\" alt=\"Add Text to Elementor Hamburger Menu Icon\" class=\"wp-image-21018\" title=\"\"><\/figure>\n\n\n\n<p class=\"step\"><strong>Step 1:<\/strong> Copy below code and paste into Appearance &gt; Customize &gt; Additional CSS.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> You can replace &#8220;Menu&#8221; text with any text you want.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.elementor-menu-toggle i:before {\ncontent: 'Menu';\nfont-size:24px;\nfont-weight: 700;\n}\n.elementor-menu-toggle.elementor-active i:before {\ncontent: 'Close';\nfont-size:24px;\nfont-weight: 700;\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add own image icon to Elementor Hamburger Menu Icon<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"322\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/Add-own-image-icon-to-Elementor-Hamburger-Menu-Icon.webp\" alt=\"Add own image icon to Elementor Hamburger Menu Icon\" class=\"wp-image-21017\" title=\"\"><\/figure>\n\n\n\n<p class=\"step\"><strong>Step 1: <\/strong>Copy below code and paste into additional CSS.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> Replace image with own image Url.<\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.elementor-menu-toggle i{\nmax-width:32px;\ncontent: url(https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/menuicon.png);\n}\n\n.elementor-menu-toggle.elementor-active i {\nmax-width:32px;\ncontent: url(https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/close.png);\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add custom icon to Elementor Hamburger Menu Icon<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"318\" src=\"https:\/\/mcstarters.com\/blog\/wp-content\/uploads\/2021\/12\/Add-custom-icon-to-Elementor-Hamburger-Menu-Icon.webp\" alt=\"Add custom icon to Elementor Hamburger Menu Icon\" class=\"wp-image-21016\" title=\"\"><\/figure>\n\n\n\n<p class=\"step\"><strong>Step 1: <\/strong>Copy below code and paste into WordPress child theme or Additional CSS.<\/p>\n\n\n\n<p class=\"step\"><strong>Step 2:<\/strong> Get more icon code <a href=\"https:\/\/fontawesome.com\/v5\/cheatsheet\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/fontawesome.com\/v5\/cheatsheet\" rel=\"noreferrer noopener nofollow\">here<\/a> if you want to change icons. <\/p>\n\n\n\n<pre class=\"wp-block-code bg-code\"><code>.elementor-menu-toggle i:before{\n    font-family: \"Font Awesome 5 Free\"; \n    font-weight: 900; \n    content: \"\\f036\";\n}\n\n.elementor-menu-toggle.elementor-active i:before{\n    font-family: \"Font Awesome 5 Free\"; \n    font-weight: 900; \n    content: \"\\f038\";\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Video Tutorial:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How to Change Elementor Default Hamburger Menu Icon\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/ui9J-PPOuyY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>That\u2019s it! If you have any questions, feel free to comment below.<\/p>\n\n\n\n<p class=\"bg-light\">For Problem Solution and Web Design:  <a href=\"https:\/\/mcstarters.com\/services\/elementor-expert\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/mcstarters.com\/services\/elementor-expert\/\" rel=\"noreferrer noopener\"><strong>Hire Elementor Expert<\/strong><\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Faq : Change the hamburger icon in Elementor<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1640148411902\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I change the hamburger icon in Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can change hamburger icon in Elementor with the help of custom code. Get custom code from this post and paste code into appearance &gt; customize &gt; custom CSS. <\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1640148758390\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">How do I change the menu style in Elementor?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>You can change menu style in Elementor theme builder. It is easy to use with drag and drop system. <\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Elementor is a fantastic page builder, and&nbsp;it is the most&#8230;<\/p>\n","protected":false},"author":5,"featured_media":21019,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[4],"tags":[447,448],"class_list":["post-21013","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-elementor-default","tag-hamburger-menu-icons"],"_links":{"self":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/21013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/comments?post=21013"}],"version-history":[{"count":1,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/21013\/revisions"}],"predecessor-version":[{"id":37364,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/posts\/21013\/revisions\/37364"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media\/21019"}],"wp:attachment":[{"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/media?parent=21013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/categories?post=21013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mcstarters.com\/blog\/wp-json\/wp\/v2\/tags?post=21013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}