{"id":7501,"date":"2025-02-10T13:47:24","date_gmt":"2025-02-10T13:47:24","guid":{"rendered":"https:\/\/tableberg.com\/?p=7501"},"modified":"2025-02-10T13:47:24","modified_gmt":"2025-02-10T13:47:24","slug":"%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%81%ae%e3%82%bd%e3%83%bc%e3%82%b7%e3%83%a3%e3%83%ab%e3%83%bb%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%83%bb%e3%83%96%e3%83%ad%e3%83%83%e3%82%af","status":"publish","type":"post","link":"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/","title":{"rendered":"\u30bd\u30fc\u30b7\u30e3\u30eb\u30fb\u30a2\u30a4\u30b3\u30f3 - \u4f7f\u3044\u65b9\u3068\u6982\u8981"},"content":{"rendered":"\n<p>The <strong><a href=\"https:\/\/wordpress.org\/documentation\/article\/social-icons\/\" target=\"_blank\" rel=\"noreferrer noopener\">Social Icons<\/a><\/strong> block in WordPress allows you to integrate social media into your website easily. Social media is essential for enhancing user engagement and expanding your online presence. <\/p>\n\n\n\n<p>The Social Icons lets you add clickable icons linked to your social network platforms. It is helpful and helps your visitors to connect with you on various platforms. <\/p>\n\n\n\n<p>Today, we will see how to use the Social Icons block in WordPress and an overview of the Social Icons block. Make sure to stay with us. <\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" style=\"max-width: -moz-fit-content; \" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents ub_table-of-contents-collapsed\" id=\"ub_table-of-contents-397bfceb-1083-449e-ba59-1002fa053439\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"true\" data-initiallyshow=\"false\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">How to Use the Social Icons Block in WordPress<\/div>\n\t\t\t\t<div class=\"ub_table-of-contents-header-toggle\">\n\t\t\t<div class=\"ub_table-of-contents-toggle\" style=\"\">\n\t\t\t\u00a0[<a class=\"ub_table-of-contents-toggle-link\" href=\"#\" style=\"\">show<\/a>]\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column ub-hide\">\n\t\t\t\t<ul style=\"\"><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/#0-how-to-use-the-social-icons-block-in-wordpress\" style=\"\">How to Use the Social Icons Block in WordPress?<\/a><ul><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/#1-insert-the-social-icons-block\" style=\"\">Insert the Social Icons Block<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/#2-insert-your-social-icons\" style=\"\">Insert Your Social Icons<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/#3-block-customization\" style=\"\">Block Customization<\/a><\/li><\/ul><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/#4-overview\" style=\"\">Overview<\/a><\/li><li style=\"\"><a href=\"https:\/\/tableberg.com\/ja\/how-to-use-the-social-icons-block-in-wordpress\/#5-final-thoughts\" style=\"\">Final Thoughts!<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Create Beautiful Tables <\/strong><br><strong>With Block Editor<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Try Free<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Get Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-how-to-use-the-social-icons-block-in-wordpress\">How to Use the Social Icons Block in WordPress?<\/h2>\n\n\n\n<p>You will not need to install any third-party plugin to use the WordPress social icons block as it is built-in. Follow the steps below and learn how to use it. <\/p>\n\n\n<!DOCTYPE html>\n<?xml version=\"1.0\" encoding=\"UTF-8\"?><div class=\"wp-block-ub-tabbed-content wp-block-ub-tabbed-content-underline wp-block-ub-tabbed-content-holder wp-block-ub-tabbed-content-horizontal-holder-mobile wp-block-ub-tabbed-content-horizontal-holder-tablet\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b\" style=\"\">\n\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-holder horizontal-tab-width-mobile horizontal-tab-width-tablet\">\n\t\t\t\t<div role=\"tablist\" class=\"wp-block-ub-tabbed-content-tabs-title wp-block-ub-tabbed-content-tabs-title-mobile-horizontal-tab wp-block-ub-tabbed-content-tabs-title-tablet-horizontal-tab\" style=\"justify-content: center; \"><div role=\"tab\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-tab-0\" aria-controls=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-panel-0\" aria-selected=\"true\" class=\"wp-block-ub-tabbed-content-tab-title-wrap active ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-title-color: #661fe7; --ub-tabbed-active-title-color: #661fe7; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: center; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 1<\/strong><\/div>\n\t\t\t<\/div><div role=\"tab\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-tab-1\" aria-controls=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-panel-1\" aria-selected=\"false\" class=\"wp-block-ub-tabbed-content-tab-title-wrap ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-active-title-color: #661fe7; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: center; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 2<\/strong><\/div>\n\t\t\t<\/div><div role=\"tab\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-tab-2\" aria-controls=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-panel-2\" aria-selected=\"false\" class=\"wp-block-ub-tabbed-content-tab-title-wrap ub-tabbed-content-with-sub-title\" style=\"--ub-tabbed-title-background-color: inherit; --ub-tabbed-active-title-color: #661fe7; --ub-tabbed-active-title-background-color: inherit; border-top-left-radius: 100px;; border-top-right-radius: 100px;; border-bottom-left-radius: 100px;; border-bottom-right-radius: 100px;; text-align: center; \" tabindex=\"-1\"><div class=\"ub-pro-tab-title-icon\" style=\"width: 30px; height: 30px\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"30\" width=\"30\" viewBox=\"0, 0, 512, 512\" class=\"ultimate-blocks-icon-component-svg-base\">\n\t\t\t<path fill=\"currentColor\" d=\"M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM358.6 278.6l-112 112c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L290.8 256L201.4 166.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l112 112C364.9 239.6 368 247.8 368 256S364.9 272.4 358.6 278.6z\"><\/path>\n\t\t<\/svg>\n<\/div>\n\t\t\t\t<div class=\"wp-block-ub-tabbed-content-tab-title\"><strong>Step &#8211; 3<\/strong><\/div>\n\t\t\t<\/div><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"wp-block-ub-tabbed-content-tabs-content\" style=\"\"><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap active\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-panel-0\" aria-labelledby=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-tab-0\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"1-insert-the-social-icons-block\">Insert the Social Icons Block<\/h3>\n\n\n\n<p>Go to your post or page where you want to insert the social icons block. <\/p>\n\n\n\n<p>Now click &ldquo;<strong>+<\/strong>&rdquo; (Add block icon)&nbsp;<strong>(1)<\/strong>. Type &ldquo;<strong>Social Icons<\/strong>&rdquo; in the search box&nbsp;<strong>(2)<\/strong>. Finally, select the block&nbsp;<strong>(3)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"604\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_16-19-01.png\" alt=\"How to Use the Social Icons Block in WordPress\" class=\"wp-image-7505\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_16-19-01.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_16-19-01-300x205.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_16-19-01-768x524.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_16-19-01-18x12.png 18w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>After selecting the block, the Social Icons will be inserted. <\/p>\n\n<\/div><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap ub-hide\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-panel-1\" aria-labelledby=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-tab-1\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"2-insert-your-social-icons\">Insert Your Social Icons<\/h3>\n\n\n\n<p>Click the <strong>Add Block<\/strong> icon to insert the social icons into the editor <strong>(1)<\/strong>. Select your desired social media icons from the window <strong>(2)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"672\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-42-12.png\" alt=\"\" class=\"wp-image-7507\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-42-12.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-42-12-300x228.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-42-12-768x583.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-42-12-16x12.png 16w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>If you do not find your desired social icons, you can search for them in the search box (<strong>1<\/strong>) and add as many as you want. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"650\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-52-08.png\" alt=\"\" class=\"wp-image-7508\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-52-08.png 884w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-52-08-300x221.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-52-08-768x565.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-52-08-16x12.png 16w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/figure>\n\n\n\n<p>But <strong>if you want to delete one<\/strong>, select the icon using your mouse pointer and press the &#8220;<strong>Delete<\/strong>&#8221; option from the keyboard.<\/p>\n\n\n\n<p>You can <strong>add multiple social media icons<\/strong> if needed. Check out the demo below. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"648\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-54-51.png\" alt=\"\" class=\"wp-image-7509\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-54-51.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-54-51-300x219.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-54-51-768x562.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-54-51-16x12.png 16w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>After adding the icons, you must add your <strong>social media links <\/strong>for each icon. <strong>To add the link<\/strong>, click on the icons and insert your links. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"634\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-01-04.gif\" alt=\"\" class=\"wp-image-7511\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n<\/div><div role=\"tabpanel\" class=\"wp-block-ub-tabbed-content-tab-content-wrap ub-hide\" id=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-panel-2\" aria-labelledby=\"ub-tabbed-content-523a6e94-c490-41e1-8245-855c3d2a1f0b-tab-2\" tabindex=\"0\">\n\n<h3 class=\"wp-block-heading has-text-align-center\" id=\"3-block-customization\">Block Customization<\/h3>\n\n\n\n<p>You can <strong>rearrange the icon position<\/strong> if you wish.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"632\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-03-50.gif\" alt=\"\" class=\"wp-image-7512\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>The icon<strong> size is customizable<\/strong> from the editor. <strong>Click the Size option (1)<\/strong> and select the size of your social icons <strong>(2)<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"884\" height=\"602\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-25-08.png\" alt=\"\" class=\"wp-image-7528\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-25-08.png 884w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-25-08-300x204.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-25-08-768x523.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-25-08-18x12.png 18w\" sizes=\"auto, (max-width: 884px) 100vw, 884px\" \/><\/figure>\n\n\n\n<p>You can <strong>change the layout justification and orientation<\/strong> in the Block settings menu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"880\" height=\"770\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-30-03.gif\" alt=\"\" class=\"wp-image-7515\" style=\"border-width:1px;border-radius:3px\"><\/figure>\n\n\n\n<p>If you want your social icon to <strong>open the social link in a new tab<\/strong>, you must enable the option of &#8220;Open links in a new tab.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"648\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-32-58.png\" alt=\"\" class=\"wp-image-7516\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-32-58.png 890w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-32-58-300x218.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-32-58-768x559.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-32-58-16x12.png 16w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/figure>\n\n\n\n<p>If you enable the &#8220;<strong>show text<\/strong>&#8221; option, the icons will be displayed like the one below.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"886\" height=\"602\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-39-03.png\" alt=\"\" class=\"wp-image-7517\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-39-03.png 886w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-39-03-300x204.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-39-03-768x522.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-39-03-18x12.png 18w\" sizes=\"auto, (max-width: 886px) 100vw, 886px\" \/><\/figure>\n\n\n\n<p>There are even more styles in the &#8220;Styles&#8221; tab. You select from <strong>three Styles: Default (1), Logos Only (2), and Pill Shape (3)<\/strong>. A demo of three styles is below. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"890\" height=\"562\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-45-55.png\" alt=\"\" class=\"wp-image-7518\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-45-55.png 890w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-45-55-300x189.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-45-55-768x485.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-45-55-18x12.png 18w\" sizes=\"auto, (max-width: 890px) 100vw, 890px\" \/><\/figure>\n\n\n\n<p>There are some other customizations explained below. <\/p>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"276\" height=\"630\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-50-06-1.png\" alt=\"\" class=\"wp-image-7521\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-50-06-1.png 276w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-50-06-1-131x300.png 131w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_18-50-06-1-5x12.png 5w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<ol class=\"wp-block-list\">\n<li><strong>Color:<\/strong>&nbsp;This function lets you change the color of the icon and icon background.<\/li>\n\n\n\n<li><strong>Dimensions:<\/strong>&nbsp;Dimensions allow you to adjust your Social Icons block&#8217;s margin, padding, and block spacing.<\/li>\n\n\n\n<li><strong>Border:<\/strong> The border option lets you adjust the border and border radius for the block. <\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n<p>The customized demo of the social icon block is below. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"590\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-04-12.png\" alt=\"\" class=\"wp-image-7522\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-04-12.png 870w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-04-12-300x203.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-04-12-768x521.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_19-04-12-18x12.png 18w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/figure>\n\n\n\n<p>After all the customization, you must save or publish the post. <\/p>\n\n<\/div><\/div>\n\t\t<\/div>\n\n\n\n<p class=\"has-primary-accent-background-color has-background\"><strong>Note:<\/strong> <em>Remember that the social icons will not be visible until you assign a link to each icon. <strong>Therefore,  you must assign links or your social icons if you want them to display on your posts or pages. <\/strong><\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-overview\">Overview<\/h2>\n\n\n<div class=\"wp-block-ub-content-toggle wp-block-ub-content-toggle-block\" id=\"ub-content-toggle-block-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" data-mobilecollapse=\"true\" data-desktopcollapse=\"true\" data-preventcollapse=\"false\" data-showonlyone=\"false\">\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-0-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" style=\"color: #5344F4; \"><strong>What is the Social Icons Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-0-e19f5405-9baa-43a0-b0d9-85c5cc12994b\">\n\n<p>The Social Icons Block is a core block that comes with WordPress and lets you add social icons to your posts and pages. You can add numerous individual social icons.<\/p>\n\n\n\n<p>Each icon acts as a link to your specific profile, making it easy for visitors to follow, like, or engage with your social media content directly from your website. <\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-1-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" style=\"color: #5344F4; \"><strong>What are the Key Features of the Social Icons Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-1-e19f5405-9baa-43a0-b0d9-85c5cc12994b\">\n\n<p>The key features of the social icons block are the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Multiple Social Platforms:<\/strong> Supports popular platforms like Facebook, Twitter, Instagram, LinkedIn, YouTube, and more.<\/li>\n\n\n\n<li><strong>Customizable Icons:<\/strong> Choose from various icon styles and adjust their size, color, and alignment.<\/li>\n\n\n\n<li><strong>Easy Linking:<\/strong> Simply add your social media URLs to the corresponding icons.<\/li>\n\n\n\n<li><strong>Flexible Layout:<\/strong> Arrange icons horizontally or vertically to fit your site\u2019s design.<\/li>\n<\/ol>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"wp-block-ub-content-toggle-accordion\" style=\"border-color: #f1f1f1; \" id=\"ub-content-toggle-panel-block-\">\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-title-wrap\" style=\"background-color: #f1f1f1;\" aria-controls=\"ub-content-toggle-panel-2-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" tabindex=\"0\">\n\t\t\t<p class=\"wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-e19f5405-9baa-43a0-b0d9-85c5cc12994b\" style=\"color: #5344F4; \"><strong>What are the Toolbar Features of the Social Icons Block?<\/strong><\/p>\n\t\t\t<div class=\"wp-block-ub-content-toggle-accordion-toggle-wrap right\" style=\"color: #000000;\"><span class=\"wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down\"><\/span><\/div>\n\t\t<\/div>\n\t\t\t<div role=\"region\" aria-expanded=\"false\" class=\"wp-block-ub-content-toggle-accordion-content-wrap ub-hide\" id=\"ub-content-toggle-panel-2-e19f5405-9baa-43a0-b0d9-85c5cc12994b\">\n\n<p>When you select the Social Icons block, a toolbar appears with several options:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Transform To<\/strong> Convert the block into a different type, such as a group or column.<\/li>\n\n\n\n<li><strong>Drag<\/strong>: Allows you to drag and drop the block anywhere in the editor.<\/li>\n\n\n\n<li><strong>Moving Handles:<\/strong>\u00a0This option lets you move the block up and down to any other block.<\/li>\n\n\n\n<li><strong>Align<\/strong>: Adjust alignment (left, center, right, or full width) to fit your content layout.<\/li>\n\n\n\n<li><strong>Change Items Justification:<\/strong> Changes the icon position. <\/li>\n\n\n\n<li><strong>Size:<\/strong> Allows you to modify the size of the icons.<\/li>\n\n\n\n<li><strong>More Options<\/strong>: Access additional settings like grouping or adding custom CSS classes.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"662\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-35-41.png\" alt=\"\" class=\"wp-image-7527\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-35-41.png 888w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-35-41-300x224.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-35-41-768x573.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/2025-02-10_17-35-41-16x12.png 16w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\n<\/li><\/ul>\n\n\n\n<p><\/p>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-final-thoughts\">Final Thoughts!<\/h2>\n\n\n\n<p>The Social Icons block in WordPress offers an effective way to connect your website with your social media channels. <\/p>\n\n\n\n<p>By customizing icons and linking them to your profiles, you can encourage visitors to engage with your content beyond your site and establish a strong connection. <\/p>\n\n\n\n<p>I hope the tutorial is easy to follow. Let me hear your thoughts in the comment section below. Also, share this with your friends and let them know about it. <\/p>\n\n\n\n<p><strong>Read More!<\/strong><\/p>\n\n\n<ul style=\"padding-left: 1.1em; text-align: left; --ub-list-item-icon-top: 3px;; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); --ub-list-item-fa-li-top: 3px; --ub-list-item-spacing: 15px; \" class=\"wp-block-ub-styled-list ub_styled_list\" id=\"ub_styled_list-0197525a-f888-4f4e-ac7d-da8b1d84c4a9\"><div class=\"ub-block-list__layout\" style=\"text-align: left; column-count: 1; --ub-list-mobile-column-count: 1; \">\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-882ffb77-ddb4-4669-bc10-63bd11b6062e\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-change-the-background-color-of-a-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Change the Background Color of a Block in WordPress<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-1ca46449-2d67-466b-a9b4-ce6d476443fb\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/best-woocommerce-product-search-plugins\/\" target=\"_blank\" rel=\"noreferrer noopener\">7 Best WooCommerce Product Search Plugins (Free and Paid)<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-d39115d6-a546-4e33-94ab-5e93ab9a5888\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-details-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Details Block &#8211; How to Use it &amp; Overview<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-0a2d7e3b-8834-45f3-bb98-de9fd67182e5\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-separator-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Separator Block &#8211; How to Use Guide &amp; Overview<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n\n<li class=\"ub_styled_list_item\" style=\"--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image\/svg+xml;utf8,&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 512 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;'); \" id=\"ub-styled-list-item-cac147b8-8732-4ac4-a7a9-64e45de40a31\">\n\t\t\t<div class=\"ub_list_item_content\">\n\t\t\t\t<span class=\"ub_list_item_icon\">\n\t\t\t\t\t<svg width=\"0.9em\" height=\"0.9em\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 512 512\"><path fill=\"#000000\" d=\"M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z\"><\/path><\/svg>\n\t\t\t\t<\/span>\n\t\t\t\t<span class=\"ub_list_item_text\"><a href=\"https:\/\/tableberg.com\/how-to-use-the-search-block-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Use the Search Block in WordPress (3 Easy Steps)<\/a><\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/li>\n<\/div><\/ul>\n\n<div class=\"wp-block-ub-social-share\" id=\"ub-social-share-e9ad3068-dc82-4989-86fc-419dbc440d85\">\n\t\t\t<div class=\"social-share-icons align-icons-center orientation-icons-row\"><a aria-label=\"facebook-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-social-icons-block-in-wordpress%2F&amp;title=Social%20Icons%20%26%238211%3B%20How%20to%20Use%20it%20%26amp%3B%20Overview\" class=\"ub-social-share-facebook-container\" style=\"border-color: #1877f2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-facebook\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#1877f2\" fill=\"#1877f2\" width=\"20\" height=\"20\" viewbox=\"0 0 264 512\"><path d=\"M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><a aria-label=\"twitter-logo\" target=\"_blank\" rel=\"nofollow\" href=\"http:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-social-icons-block-in-wordpress%2F&amp;text=Social%20Icons%20%26%238211%3B%20How%20to%20Use%20it%20%26amp%3B%20Overview\" class=\"ub-social-share-twitter-container\" style=\"border-color: #1d9bf0; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-twitter\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"color:#1d9BF0\" fill=\"#1d9BF0\" width=\"20\" height=\"20\" viewbox=\"0 0 24 24\"><path d=\"M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z\"><\/path><\/svg><\/span><span style=\"\">tweet<\/span>\n\t\t\t<\/a><a aria-label=\"linkedin-logo\" target=\"_blank\" rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Ftableberg.com%2Fja%2Fhow-to-use-the-social-icons-block-in-wordpress%2F\" class=\"ub-social-share-linkedin-container\" style=\"border-color: #2867b2; background-color: transparent; box-shadow: none; \">\n\t\t\t\t<span class=\"social-share-icon ub-social-share-linkedin\" style=\"width: 30px; height: 30px; \"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"fill:#2867b2\" fill=\"#2867b2\" width=\"20\" height=\"20\" viewbox=\"0 0 448 512\"><path d=\"M100.3 480H7.4V180.9h92.9V480zM53.8 140.1C24.1 140.1 0 115.5 0 85.8 0 56.1 24.1 32 53.8 32c29.7 0 53.8 24.1 53.8 53.8 0 29.7-24.1 54.3-53.8 54.3zM448 480h-92.7V334.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V480h-92.8V180.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V480z\"><\/path><\/svg><\/span><span style=\"\">share<\/span>\n\t\t\t<\/a><\/div>\n\t\t<\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Social Icons block in WordPress allows you to integrate social media into your website easily. Social media is essential for enhancing user engagement and expanding your online presence. The Social Icons lets you add clickable icons linked to your social network platforms. It is helpful and helps your visitors to connect with you on various platforms. Today, we will see how to use the Social Icons block in WordPress and an overview of the Social Icons block. Make sure to stay with us. How to Use the Social Icons Block in WordPress? You will not need to install any third-party plugin to use the WordPress social icons block as [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":7503,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-7501","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/02\/How-to-Use-the-Social-Icon-Block-in-WordPress-1140-x-450.png","author_info":{"display_name":"Ankur Raj Bongshi","author_link":"https:\/\/tableberg.com\/ja\/author\/rajankur003\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7501","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/comments?post=7501"}],"version-history":[{"count":19,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7501\/revisions"}],"predecessor-version":[{"id":7539,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/posts\/7501\/revisions\/7539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media\/7503"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/media?parent=7501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/categories?post=7501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/ja\/wp-json\/wp\/v2\/tags?post=7501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}