{"id":18223,"date":"2020-12-29T15:00:13","date_gmt":"2020-12-29T14:00:13","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=18223"},"modified":"2022-01-14T11:14:37","modified_gmt":"2022-01-14T10:14:37","slug":"how-to-add-social-media-icons-to-wordpress-menu","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-social-media-icons-to-wordpress-menu\/","title":{"rendered":"How to Add Social Media Icons to Your WordPress Menu"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]As the old adage goes, a picture is worth a thousand words. We could argue it is actually far fewer, but there is no denying that web<strong> icons are powerful and intuitive<\/strong>, especially the social media ones. That cheerful blue bird in flight? The stylized square camera? The round-cornered red rectangle with the play symbol? You know what they stand for without even thinking. Social media logos are some of the most memorable pictures there are.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Adding social media icons to your WordPress menu is easy and takes no time at all. We will show you how. But before we get down to the brass tacks, let us discuss why you want your social media icons in your menu.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#why-social-media-icons\">Why Do I Need Social Media Icons in My WordPress Menu?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-social-icons-to-header-and-footer-using-bridge\">How to Add Social Icons to Header and Footer Using the Bridge WordPress Theme<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-social-icons-to-menu-in-bridge\">How to Add Social Media Icons to Your WordPress Menu Items in Bridge<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-social-icons-to-menu-using-plugin\">How to Add Social Media Icons to Your WordPress Menu Items Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"why-social-media-icons\"><\/a>Why Do I Need Social Media Icons in My WordPress Menu?<\/h2>\n<p>[\/vc_column_text][vc_column_text]Lots of icons may clutter up your interface, especially on mobile devices. By putting them in a menu, you can easily avoid that. Users are used to looking for them in menus, and <strong>you can make a menu more elegant and intuitive<\/strong> by adding icons to it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similarly, you could <strong>create a special social menu<\/strong> with only your <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-free-social-media-icons-sets-for-wordpress\/\">social media icons<\/a>, and embed that menu into any widget-ready area to your visitors reach your social media content with a simple click and without having to navigate away from your website. Your mobile users will be especially appreciative.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-social-icons-to-header-and-footer-using-bridge\"><\/a>How to Add Social Icons to Header and Footer Menu Using the Bridge WordPress Theme<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are using our versatile <a href=\"https:\/\/qodeinteractive.com\/wordpress-theme\/bridge-creative-multi-purpose-wordpress-theme\/\">Bridge theme<\/a>, adding social icons to your header or footer menu is about as simple as it gets. We even have a dedicated widget for that![\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All you really need to install social media icons in your header or footer is this handy video-tutorial:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;42px&#8221;][vc_column_text]<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/bvtCEWkmJok\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]But if you prefer your tutorials in text form, scroll right down. We\u2019ll take you step by step through all you need to do. We will show you how to do it for your header menu, but the footer areas work just the same in principle.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The widget areas which are available to you will depend on the Bridge demo you are using. The header for the demo we are using does not contain any social icons.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"471\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Bridge-Demo-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Bridge Demo Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Bridge-Demo-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Bridge-Demo-Preview-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Bridge-Demo-Preview-768x373.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Bridge-Demo-Preview-620x301.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In order to fix that, you need to navigate to <strong>Appearance\/Widgets<\/strong> through the right-hand side menu on your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Appearance-Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Appearance-Widgets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Appearance-Widgets-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Appearance-Widgets-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Appearance-Widgets-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you need to find the correct widget area. We want our social icons next to the menu, and, in this Bridge demo, the corresponding area is <strong>Header Bottom Right<\/strong>.\u00a0To place a social icon in any widget area, you need to drag a <strong>Qode Social Icon<\/strong> widget to it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Qode Social Icon Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, you need to configure this widget. We will select the <strong>Circle<\/strong> icon type (you can choose a different type of icon, depending on your website style and appearance), the <strong>Font Elegant<\/strong> icon pack (also supported is Font Awesome), and the <strong>Facebook<\/strong> icon from the <strong>Font Elegant Icon<\/strong> dropdown menu, and enter the <strong>Custom Size<\/strong> and <strong>Custom Shape Size<\/strong> (10 and 13 pixels for us, respectively, but you can select your own). For the purposes of this demonstration, we will supply the widget with our Facebook page\u2018s hyperlink (you will, of course, use yours) and change the Target to <strong>New Window<\/strong>. The <strong>Qode Social Icon<\/strong> widget also contains numerous design settings which we will not go into right now. Suffice it to say that the multitude of size, colour and border settings makes the widget very versatile and adaptable to any style.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"605\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Qode Social Icon Widget Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-Settings-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-Settings-768x480.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Qode-Social-Icon-Widget-Settings-620x387.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can populate the same area with some more social icons, if you like, as we have done here. The order in which you sort your social icons is the order (left to right) in which the icons will appear in the header. And now your header will contain avenues for your social media accounts.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"599\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Social-Icons-Header.jpg\" class=\"attachment-full size-full\" alt=\"Social Icons Header\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Social-Icons-Header.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Social-Icons-Header-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Social-Icons-Header-768x475.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Social-Icons-Header-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-social-icons-to-menu-in-bridge\"><\/a>How to Add Social Media Icons to Your WordPress Menu Items in Bridge<\/h2>\n<p>[\/vc_column_text][vc_column_text]But what if you want to attach social icons to items in your menu? Bridge can do that, too, and so could other themes which you may be using, but we will demonstrate how to do this with our theme.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, you need to navigate to <strong>Appearance\/Menus<\/strong> and find your top navigation menu. In our case, its name is Mega Menu. Next, you need to add a link to a social media profile, our Twitter profile in our case. In order to do that, you need to add a<strong> Custom Link<\/strong> menu item to your menu. Find the <strong>Custom Links<\/strong> item in the <strong>Add menu items<\/strong> menu and paste your URL into the <strong>URL<\/strong> field. For our Twitter, we will simply type <em>Our Twitter<\/em> into the <strong>Link Text<\/strong> field, and click the <strong>Add to Menu<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-Menu.jpg\" class=\"attachment-full size-full\" alt=\"Custom Links Menu\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-Menu.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-Menu-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-Menu-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-Menu-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The element is now at the bottom of your <strong>Menu structure<\/strong>, meaning it will appear to the far right of the top navigation menu. We like it there, but you can, of course, organize your menus however you like. Expand the element to configure it. For <strong>Type<\/strong>, you need to select <em>wide with icons<\/em>, as this is the only menu item type which will display an icon in Bridge. We will also select the <em>Font Awesome<\/em> for our <strong>Icon Pack<\/strong>, and <em>fa-twitter<\/em> for our <strong>Icon<\/strong>. Of course, you can select the <em>Font Elegant<\/em> icon pack, and the icon you like for your social profile. Scrolling a little further down, click the <strong>Save Menu<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And now your menu will contain a link with its social icon. You can <strong>add as many of these social links as you like<\/strong>, and also assign icons to other menu items, but that goes beyond the scope of this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"586\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-With-Icon-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item With Icon Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-With-Icon-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-With-Icon-Preview-300x181.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-With-Icon-Preview-768x464.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-With-Icon-Preview-620x375.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-social-icons-to-menu-using-plugin\"><\/a>How to Add Social Media Icons to Your WordPress Menu Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Our first suggestion is always to use a theme\u2018s in-built functionality for any effect you wish to achieve. If the theme you are using does not have the functionality you want, a plugin often offers a good workaround. The plugin we will be using is <a href=\"https:\/\/wordpress.org\/plugins\/menu-image\/\" target=\"_blank\" rel=\"noopener\">Menu Image<\/a>. After having installed and activated the plugin, you will be first prompted to turn on notifications for this plugin (which we will <strong>Skip<\/strong>), and then taken to the Settings screen. Here you may change your icon sizes to suit your website\u2018s style. We will simply <strong>Save Changes<\/strong> and move on.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Image-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Menu Image Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Image-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Image-Settings-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Image-Settings-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Image-Settings-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, navigate to <strong>Appearance\/Menus<\/strong> and find your top navigation menu, the Mega Menu. Select <strong>Custom Links<\/strong> from the <strong>Add menu items<\/strong> menu on the left-hand side, and configure it. For the purposes of this demonstration, we will paste our Instagram profile\u2018s URL in the <strong>URL<\/strong> field, and caption it with <em>Our Instagram<\/em> in the <strong>Link Text<\/strong> field before clicking the <strong>Add to Menu<\/strong> button, while you may choose whichever social profile and icon you like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-2.jpg\" class=\"attachment-full size-full\" alt=\"Custom Links\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Custom-Links-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will place a <strong>Custom Links<\/strong> element at the bottom of your <strong>Menu structure<\/strong>, meaning it will appear at the far right of your menu. You can arrange your menus however you like, but we will leave it there. You do need to expand the element to configure it. We will set the <strong>Title Position<\/strong> to <em>After<\/em>, meaning that the icon will appear to the <em>left<\/em> of the <strong>Navigation Label<\/strong>, and click <strong>Set image<\/strong> to select <a href=\"https:\/\/qodeinteractive.com\/magazine\/social-media-image-sizes\/\">an image<\/a> from your Media Library or upload one.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"550\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-2-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-2-768x436.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Settings-2-620x352.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have supplied our Media Library with a free Instagram icon. You can upload whichever other image you like for each menu item, but we will leave it at that, because we want our social icon to really stand out and be instantly recognizable. You can also select a different version for an on-hover icon, by clicking the <strong>Set image on hover<\/strong> icon. Finally, once you\u2019re satisfied with your settings, you need to click the <strong>Save Menu<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"550\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Upload-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Upload Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Upload-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Upload-Icon-300x170.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Upload-Icon-768x436.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Upload-Icon-620x352.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And your Instagram profile link will now be the star of our top navigation menu!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"588\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Instagram-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Menu Item Instagram Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Instagram-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Instagram-Preview-300x182.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Instagram-Preview-768x466.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Menu-Item-Instagram-Preview-620x376.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As we have shown, adding icons to your menu items is easy and quick. Whether you use your theme\u2018s built in options or a plugin, you can make your social media presence known to your website visitors in just a few clicks of the mouse. In this day and age, can you afford not to?<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Looking to advertise your social media to your website visitors? We will show you how &#8211; with social media icons in your menu.<\/p>\n","protected":false},"author":16990,"featured_media":18283,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,26,16,4,13],"class_list":["post-18223","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-social","tag-themes","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=18223"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/18223\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/18283"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=18223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=18223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=18223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}