{"id":3490,"date":"2020-07-25T00:38:11","date_gmt":"2020-07-25T00:38:11","guid":{"rendered":"https:\/\/essentials.pixfort.com\/knowledge-base\/?p=3490"},"modified":"2023-12-23T22:38:40","modified_gmt":"2023-12-23T22:38:40","slug":"how-to-add-social-icons","status":"publish","type":"post","link":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/","title":{"rendered":"How to add social icons"},"content":{"rendered":"

[vc_row pix_particles_check=”” css=”.vc_custom_1595689026132{padding-top: 20px !important;}”][vc_column]

1<\/span><\/div>
Add social icons to header<\/h5>
<\/div><\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=””][vc_column][vc_column_text]To add social icons in the header, first, you need to set your social network accounts links in the Theme options > Layout > Social icons<\/strong>.[\/vc_column_text]
\"Image<\/div><\/div>

Essentials Theme Options<\/p><\/div>[vc_column_text]After setting the links in the Theme options you will notice that the social icons will appear automatically in the header after adding the social element in the header builder (WordPress admin panel > Headers > Edit your header<\/b>) <\/strong>.[\/vc_column_text]

\"Image<\/div><\/div>

Add social element in pixfort Header Builder<\/p><\/div>

\"Image<\/div><\/div>

The result<\/p><\/div>

<\/defs> <\/circle> <\/path> <\/g> <\/svg><\/div>
Want to add to your Header a social icon that is missing from the list in the Theme options?<\/h6>
<\/div><\/div><\/div><\/a>[vc_column_text]<\/p>\n

Currently the Social icons tab in the Theme options includes a group of social apps, therefore some social apps may not be available directly in that list (we are continually adding new social apps icons to the theme).<\/p>\n

However, if the social icon you’re looking for is not available directly in the theme options, you can check if it’s available in the Font icons set<\/b> in the theme, by using the Link<\/b> element (without inserting text) in the header builder<\/b> to add an icon from the available font icons set in the theme.<\/p>\n

Below you can check an example for adding the Soundcloud icon in the header builder<\/b>:<\/p>\n

[\/vc_column_text]

\"Image<\/div><\/div>

Add a Link element in the Header builder<\/p><\/div>[vc_column_text]<\/p>\n

After clicking on the link element the Options panel will appear and you can search of an icon and insert a link as follows:<\/p>\n

[\/vc_column_text]

\"Image<\/div><\/div>

Click on the Link element to open its options<\/p><\/div>[vc_column_text]The result:<\/strong>[\/vc_column_text]

\"Image<\/div><\/div>[vc_column_text css=”.vc_custom_1646687770430{padding-top: 30px !important;}”]Finally, if the icon you want to add is also not available in the Font icons set, there’s a workaround by using the Logo element (image) in the header builder to add any social icon you want as an image.<\/p>\n

Below you can find an example for adding an icon (Xing social network) as an image using the Logo element in the header builder:[\/vc_column_text]

\"Image<\/div><\/div>[vc_column_text css=”.vc_custom_1646688128572{padding-top: 20px !important;}”]<\/p>\n

After clicking on the Logo element the Options panel will appear and you will be able to choose the image, image size and link as follows:<\/p>\n

[\/vc_column_text]

\"Image<\/div><\/div>[vc_column_text css=”.vc_custom_1646688136176{padding-top: 20px !important;}”]The result:<\/strong>[\/vc_column_text]
\"Image<\/div><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=”” css=”.vc_custom_1595688958236{padding-top: 40px !important;}”][vc_column]
2<\/span><\/div>
Add social icons to sidebar using social links widget<\/h5>
<\/div><\/div><\/div>[vc_column_text]To add social icons to the sidebar, go to\u00a0Appearance > Widgets<\/b>, then drag and drop PixFort Social Links widget to the desired sidebar, after that you can click on the widget to view and set the links.[\/vc_column_text]
\"Image<\/div><\/div>

Widgets page<\/p><\/div>

\"Image<\/div><\/div>

The result: sidebar with social links widget<\/p><\/div>[\/vc_column][\/vc_row][vc_row pix_particles_check=”” css=”.vc_custom_1595688952550{padding-top: 40px !important;}”][vc_column]

3<\/span><\/div>
Add social icons to your page or footer<\/h5>
<\/div><\/div><\/div>[vc_column_text]You can add social icons anywhere in your page or footer using WPBakery<\/strong> or Elementor<\/strong> page builder, just open the page<\/strong> or footer<\/strong> using the desired page builder and add the Social icons element<\/strong> from pixfort Elements<\/strong> and set the links via the element’s options panel.[\/vc_column_text]
\"Image<\/div><\/div>

Social icons element in pixfort Elements (in WPBakery and Elementor)<\/p><\/div>[\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"Learn how to add social icons to header, page, footer or sidebar widget.","protected":false},"author":1,"featured_media":3535,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,60],"tags":[50,66,156,345,194,346,343,344,347,65],"yoast_head":"\nHow to add social icons - Essentials Knowledge base<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\" \/>\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 - Essentials Knowledge base\" \/>\n<meta property=\"og:description\" content=\"Learn how to add social icons to header, page, footer or sidebar widget.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Essentials Knowledge base\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pixfort\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-25T00:38:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-23T22:38:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"pixfort\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pixfort\" \/>\n<meta name=\"twitter:site\" content=\"@pixfort\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"pixfort\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\"},\"author\":{\"name\":\"pixfort\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\"},\"headline\":\"How to add social icons\",\"datePublished\":\"2020-07-25T00:38:11+00:00\",\"dateModified\":\"2023-12-23T22:38:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\"},\"wordCount\":1153,\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png\",\"keywords\":[\"Elementor\",\"Elements\",\"header builder\",\"header social\",\"icon\",\"missing social icons\",\"social\",\"social icons\",\"social icons list\",\"WPBakery\"],\"articleSection\":[\"FAQ\",\"Tips & tricks\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\",\"name\":\"How to add social icons - Essentials Knowledge base\",\"isPartOf\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png\",\"datePublished\":\"2020-07-25T00:38:11+00:00\",\"dateModified\":\"2023-12-23T22:38:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png\",\"width\":1200,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to add social icons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#website\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"name\":\"Essentials Knowledge base\",\"description\":\"made by pixfort\",\"publisher\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization\",\"name\":\"pixfort\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"contentUrl\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png\",\"width\":322,\"height\":110,\"caption\":\"pixfort\"},\"image\":{\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pixfort\",\"https:\/\/twitter.com\/pixfort\",\"https:\/\/www.instagram.com\/pixfort\/\",\"https:\/\/www.linkedin.com\/company\/pixfort\",\"https:\/\/www.youtube.com\/c\/Pixfort\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6\",\"name\":\"pixfort\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g\",\"caption\":\"pixfort\"},\"description\":\"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub\",\"sameAs\":[\"http:\/\/hub.pixfort.com\"],\"url\":\"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to add social icons - Essentials Knowledge base","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:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/","og_locale":"en_US","og_type":"article","og_title":"How to add social icons - Essentials Knowledge base","og_description":"Learn how to add social icons to header, page, footer or sidebar widget.","og_url":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/","og_site_name":"Essentials Knowledge base","article_publisher":"https:\/\/www.facebook.com\/pixfort","article_published_time":"2020-07-25T00:38:11+00:00","article_modified_time":"2023-12-23T22:38:40+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png","type":"image\/png"}],"author":"pixfort","twitter_card":"summary_large_image","twitter_creator":"@pixfort","twitter_site":"@pixfort","twitter_misc":{"Written by":"pixfort","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#article","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/"},"author":{"name":"pixfort","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6"},"headline":"How to add social icons","datePublished":"2020-07-25T00:38:11+00:00","dateModified":"2023-12-23T22:38:40+00:00","mainEntityOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/"},"wordCount":1153,"publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png","keywords":["Elementor","Elements","header builder","header social","icon","missing social icons","social","social icons","social icons list","WPBakery"],"articleSection":["FAQ","Tips & tricks"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/","name":"How to add social icons - Essentials Knowledge base","isPartOf":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website"},"primaryImageOfPage":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png","datePublished":"2020-07-25T00:38:11+00:00","dateModified":"2023-12-23T22:38:40+00:00","breadcrumb":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#primaryimage","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/social-icons.png","width":1200,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/how-to-add-social-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/essentials.pixfort.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"How to add social icons"}]},{"@type":"WebSite","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#website","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","name":"Essentials Knowledge base","description":"made by pixfort","publisher":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/essentials.pixfort.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#organization","name":"pixfort","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","contentUrl":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-content\/uploads\/sites\/33\/2020\/07\/support-logo-dark-clean.png","width":322,"height":110,"caption":"pixfort"},"image":{"@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pixfort","https:\/\/twitter.com\/pixfort","https:\/\/www.instagram.com\/pixfort\/","https:\/\/www.linkedin.com\/company\/pixfort","https:\/\/www.youtube.com\/c\/Pixfort"]},{"@type":"Person","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/ce28d19c64aa87116b0fc2685df067b6","name":"pixfort","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/essentials.pixfort.com\/knowledge-base\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f5c4155e987c6ab4b3e8278828fe024c?s=96&d=mm&r=g","caption":"pixfort"},"description":"Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub","sameAs":["http:\/\/hub.pixfort.com"],"url":"https:\/\/essentials.pixfort.com\/knowledge-base\/author\/pixfort\/"}]}},"_links":{"self":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3490"}],"collection":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/comments?post=3490"}],"version-history":[{"count":22,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3490\/revisions"}],"predecessor-version":[{"id":7227,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/posts\/3490\/revisions\/7227"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media\/3535"}],"wp:attachment":[{"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=3490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/categories?post=3490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/essentials.pixfort.com\/knowledge-base\/wp-json\/wp\/v2\/tags?post=3490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}