{"id":397,"date":"2025-02-24T01:38:59","date_gmt":"2025-02-24T01:38:59","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2025\/02\/24\/10625194-hostinger-website-builder-how-to-add-social-media-icons-in-your-header\/"},"modified":"2025-08-27T06:40:39","modified_gmt":"2025-08-27T06:40:39","slug":"10625194-hostinger-website-builder-how-to-add-social-media-icons-in-your-header","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/10625194-hostinger-website-builder-how-to-add-social-media-icons-in-your-header\/","title":{"rendered":"Hostinger Website Builder: How to Add Social Media Icons in Your Header"},"content":{"rendered":"<p class=\"no-margin\">Social media icons link to the social media profiles of individuals or organizations associated with the website. This allows visitors to connect, follow, and interact with these individuals or organizations on social media, fostering a sense of community and facilitating further engagement outside the website itself.<\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Insert links to your social media profiles, and<b> we&rsquo;ll generate the icons for you automatically<\/b>! For instance, if you insert a link to your LinkedIn profile, the LinkedIn icon will be displayed automatically &#128161;<\/p>\n<\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">To add a social media icon to your website&rsquo;s header, click on the header section and select<b> Edit header<\/b>:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/8e8de627-9ced-4ab6-8315-88f6841df7c8.jpg\" alt=\"Accessing the website's header settings\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Open the <b>Style<\/b> tab, select <b>Social icons<\/b> from the dropdown,<b> <\/b>and <b>toggle the button<\/b> to enable them:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/f071a899-addc-4750-bf93-7cca69b3d83b.jpg\" alt=\"The style settings of the header in Hostinger Website Builder\" width=\"450\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Now, add the links to your social media platforms. You may also change the icon size and color:<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/a8026d7b-b3a2-42cb-975a-27f96b07e92d.jpg\" alt=\"Adding social media icons to the website's header section\" width=\"350\"><\/div><p class=\"no-margin\">\n<\/p><p class=\"no-margin\"><b>NOTES<\/b><\/p><ul>\n<li>\n<p class=\"no-margin\">To add an email icon, insert your email address:<br>&#8203;<\/p>\n<div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/001e66c0-72a5-4a46-b7f6-6fca2761a2af.jpg\" alt=\"Adding an envelope \/ email icon\" width=\"450\"><\/div>\n<p class=\"no-margin\">\n<\/p><\/li>\n<li>\n<p class=\"no-margin\">To add a phone icon, insert the desire phone number without any symbols, as below:<br>&#8203;<\/p>\n<div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/ef117ec7-bf59-4651-931c-a96942228c3a.jpg\" width=\"300\"><\/div>\n<p class=\"no-margin\">\n<\/p><div class=\"intercom-container intercom-align-center\"><img decoding=\"async\" src=\"\/support\/wp-content\/uploads\/sites\/55\/2025\/02\/1d0b97bc-af0e-4f3d-956f-105baebdb189.jpg\" width=\"300\"><\/div>\n<p class=\"no-margin\">\n<\/p><\/li>\n<li>\n<p class=\"no-margin\">If the link isn&rsquo;t recognized, the icon won&rsquo;t be automatically generated, and you&rsquo;ll see a standard link symbol &#128279;<\/p>\n<ul>\n<li>\n<p class=\"no-margin\"><b><a href=\"\/support\/1583780-how-to-contact-live-support\" target=\"_blank\" class=\"intercom-content-link\">Contact us<\/a><\/b> and share the link you were trying to add: we&rsquo;ll make sure to include the necessary icon into our database as soon as possible<\/p>\n<\/li>\n<li>\n<p class=\"no-margin\">There may exist various link formats for the same social media platform, so the more formats you encounter, the better<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to add social media icons inside your website&#8217;s header<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[281],"tags":[],"class_list":["post-397","post","type-post","status-publish","format-standard","hentry","category-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/10625194-hostinger-website-builder-how-to-add-social-media-icons-in-your-header\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":1,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"predecessor-version":[{"id":2026,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/397\/revisions\/2026"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}