{"id":12387,"date":"2019-07-29T07:42:34","date_gmt":"2019-07-29T05:42:34","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=12387"},"modified":"2025-04-24T06:39:56","modified_gmt":"2025-04-24T04:39:56","slug":"how-to-add-social-icons-in-the-divi-header","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/","title":{"rendered":"How to Add Social Icons in the Divi Header"},"content":{"rendered":"\n

In this tutorial, we will be covering how you can add social icons in the Divi header such as Facebook, Twitter, or Instagram into Divi<\/a>. I will show you two placements for social icons. The first will be on the menu and the second will be with a custom header design.<\/p>\n\n\n\n

Here you see a demo with the social icons in the menu<\/p>\n\n\n\n

\"Social<\/figure>\n\n\n\n

And this is the demo for social icons in a custom header<\/p>\n\n\n\n

\"Social<\/figure>\n\n\n\n

Adding social icons in the menu<\/h2>\n\n\n\n

We start with adding the social icons to your menu. We will be using Font Awesome and some CSS to do this.<\/p>\n\n\n\n

Step 1: Adding Font Awesome icon kit<\/h2>\n\n\n\n

For this, we are going to add Font Awesome icon kit too Divi<\/a>. With this, we have access to thousands of icons.<\/p>\n\n\n\n

First, we need to add the Font Awesome toolkit to our site with 1 line of code.<\/p>\n\n\n\n

Go to the Font Awesome website right here: https:\/\/fontawesome.com\/start<\/a><\/p>\n\n\n\n

Fill in your email and confirm this, you will be redirected to a page with the code. Copy this code and paste it in Divi > Theme Options > Integration > Add code to the < head > of your blog<\/p>\n\n\n\n

\"Font<\/figure>\n\n\n\n

Step 2: Adding social icons in the menu<\/h2>\n\n\n\n

Go to Appearance > Menus<\/p>\n\n\n\n

If you don\u2019t have a menu yet then you can create one first and set it as your primary menu. Use the custom links option to create a social icon.<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

In the URL field, you fill in the link to your social platform. I have filled in # what means a dummy link. In the link text field, you fill in the code of the social icon. You can get this code from the website of Font Awesome.<\/p>\n\n\n\n

Go to there website and fill in the search field what icon you are looking for, in this case, I\u2019m looking for Facebook. You will get a list of icons and choose the one you want. Then you can copy the code.<\/p>\n\n\n\n

\"Icon<\/figure>\n\n\n\n

After you added the social icon to your menu you need to add a class for the social icon so we can style it in the next step<\/p>\n\n\n\n

Place the following class in the CSS classes field, in case you don\u2019t see this field then go to the top right corner of your screen and click on-screen options and check CSS classes<\/p>\n\n\n\n

Place this CSS social_icons<\/p>\n\n\n\n

\"Adding<\/figure>\n\n\n\n

Step 3: Styling the social icons<\/h2>\n\n\n\n

Go to Divi > Theme Options and place the following CSS:<\/p>\n\n\n\n

li.social_icons {\n\tpadding-right: 5px !important;\n}\n\n.fa-facebook-square {\n\tfont-size: 34px;\n\tcolor: #426aaf;\n}\n\n.fa-twitter-square {\n\tfont-size: 34px;\n\tcolor: #1da1f2;\n}\n\n.fa-google-plus-square {\n\tfont-size: 34px;\n\tcolor: #d84937;\n}<\/code><\/pre>\n\n\n\n
The first snippet of the CSS (padding-right) is for the distance between the social icons. You can change this value for more or less space.<\/p>\n\n\n\n
For this tutorial, I use 3 social icons, Facebook, Twitter and Google plus. You can find each CSS snippet above. If you use different icons you need to change the CSS class. You can find the CSS class in the social icon code that you copy\/paste in the previous step. You can change the font size and color of your social icons.<\/p>\n\n\n\n
Social icons in a custom header<\/h2>\n\n\n\n
If you want to have more control about the placement of the social icons, I recommend making a custom Divi header. You can follow this tutorial on how to make a custom Divi header<\/a>. With a custom header, you can use the social module and place this in any location in the header.<\/p>\n\n\n\n
As you can see in the demo, I have also icons in front of the menu items. In my tutorial How to add icons in your Divi menu<\/a>, I explain how I did this.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":12389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-12387","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"\nHow to Add Social Icons in the Divi Header | MarkHendriksen.com<\/title>\n<meta name=\"description\" content=\"Want to know how you can add social icons in your Divi header? In this tutorial I will cover 2 methods how you can add social icons to your header and menu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Social Icons in the Divi Header | MarkHendriksen.com\" \/>\n<meta property=\"og:description\" content=\"Want to know how you can add social icons in your Divi header? In this tutorial I will cover 2 methods how you can add social icons to your header and menu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-29T05:42:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T04:39:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"720\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"How to Add Social Icons in the Divi Header\",\"datePublished\":\"2019-07-29T05:42:34+00:00\",\"dateModified\":\"2025-04-24T04:39:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\"},\"wordCount\":609,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\",\"url\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\",\"name\":\"How to Add Social Icons in the Divi Header | MarkHendriksen.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg\",\"datePublished\":\"2019-07-29T05:42:34+00:00\",\"dateModified\":\"2025-04-24T04:39:56+00:00\",\"description\":\"Want to know how you can add social icons in your Divi header? In this tutorial I will cover 2 methods how you can add social icons to your header and menu.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg\",\"width\":720,\"height\":400,\"caption\":\"How to Add Social Icons in the Divi Header\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Social Icons in the Divi Header\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Social Icons in the Divi Header | MarkHendriksen.com","description":"Want to know how you can add social icons in your Divi header? In this tutorial I will cover 2 methods how you can add social icons to your header and menu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Social Icons in the Divi Header | MarkHendriksen.com","og_description":"Want to know how you can add social icons in your Divi header? In this tutorial I will cover 2 methods how you can add social icons to your header and menu.","og_url":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2019-07-29T05:42:34+00:00","article_modified_time":"2025-04-24T04:39:56+00:00","og_image":[{"width":720,"height":400,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"How to Add Social Icons in the Divi Header","datePublished":"2019-07-29T05:42:34+00:00","dateModified":"2025-04-24T04:39:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/"},"wordCount":609,"commentCount":1,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/","url":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/","name":"How to Add Social Icons in the Divi Header | MarkHendriksen.com","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg","datePublished":"2019-07-29T05:42:34+00:00","dateModified":"2025-04-24T04:39:56+00:00","description":"Want to know how you can add social icons in your Divi header? In this tutorial I will cover 2 methods how you can add social icons to your header and menu.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2019\/07\/How-to-add-social-icons-in-the-Divi-header.jpg","width":720,"height":400,"caption":"How to Add Social Icons in the Divi Header"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"How to Add Social Icons in the Divi Header"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=12387"}],"version-history":[{"count":4,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12387\/revisions"}],"predecessor-version":[{"id":35663,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/12387\/revisions\/35663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/12389"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=12387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=12387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=12387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}