--- title: "How To Add Social Icons in WordPress?" url: https://nexterwp.com/docs/add-social-icons-in-wordpress/ date: 2024-12-23 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "Profile links are usually a row of small icons in a header or footer — simple to describe and fiddly to build evenly by hand. The Social Icon block builds..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-To-Add-Social-Icons-in-WordPress_-1024x519.jpg word_count: 481 --- # How To Add Social Icons in WordPress? ## Key Takeaways - Social Icon block crea una fila de enlaces con tamaño, espaciado y comportamiento al pasar el cursor compartidos, y cada icono apunta a la URL de perfil que se introduce. - Nexter Blocks incluye tres redes por defecto en el bloque: Facebook, Youtube y Twitter, y el estilo cambia la altura del diseño, con 68 píxeles en el estilo predeterminado y 120 en el estilo 3. - Social Icon block es un bloque gratuito que funciona en Nexter Blocks y en Nexter Blocks Pro desactivado, pero no crea botones para compartir; para eso usa Social Sharing block. Profile links are usually a row of small icons in a header or footer — simple to describe and fiddly to build evenly by hand. The Social Icon block builds that row from a list, with shared sizing, spacing and hover behaviour. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-social-icons/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Social Icon, switched on under **Nexter > Blocks** in your WordPress dashboard.- The profile URLs you want to link to. ## Video Tutorial https://www.youtube.com/watch?v=Nv-seWQ6-YQ ## Steps - Add the **Social Icon** block to your page. ![Adding the Social Icon block](https://nexterwp.com/wp-content/uploads/2024/12/social-icons-activation-new.png) - Add one entry per network and choose its icon. ![Adding the social networks](https://nexterwp.com/wp-content/uploads/2024/12/social-icons-add-block.gif) - Enter the **profile URL** for each one. - Choose a **style** and a **hover effect**. ![Choosing the style and hover effect](https://nexterwp.com/wp-content/uploads/2024/12/social-icons-content.gif) - Set size, spacing and alignment, then publish and test each link. ![Styling the social icons](https://nexterwp.com/wp-content/uploads/2024/12/social-icons-style.png) ## How It Behaves The block renders a list of linked icons, each one pointing at the profile URL you give it. These are profile links — they are not share buttons. - **Three networks are there out of the box** — measured on a default block: Facebook, Youtube and Twitter, each rendered as a link.- **The style changes the layout, not just the colours.** Measured on the same three icons: the default style rendered 68 pixels tall and style 3 rendered 120.- **The hover effect is applied as a class** — measured, it does not change the block's size, so switching effects will not reflow your layout.- **Each icon is its own link**, so you can point them at different networks, or at the same network's different pages.- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block. ## Limitations - **These link to your profiles; they do not share the page.** For share buttons use the Social Sharing block, which builds each network's share URL from the current page.- **Every icon needs its URL set individually** — an entry with no URL is still rendered and still looks clickable.- **Icons alone are not labelled for screen readers.** Give each link a label so the destination is announced.- The block does not check that a URL is a valid profile — a typo simply leads nowhere. ## Troubleshooting ### An icon goes nowhere when clicked That entry has no URL, or has a typo. Each icon takes its own link; check them one at a time. ### I want share buttons, not profile links This is the wrong block — it links to your profiles. Use the Social Sharing block, which builds a share link for the page it sits on. ### The row is too tall after changing the style Styles differ in height. Measured on three icons: the default rendered 68 pixels and style 3 rendered 120. Pick another style or reduce the icon size. ### The icons are not centred Set the alignment on the block rather than on the container around it. ## Related Docs - [Add an icon in WordPress](https://nexterwp.com/docs/add-icon-in-wordpress/)- [Add a button in WordPress](https://nexterwp.com/docs/add-button-in-wordpress/)- [Add a heading in WordPress](https://nexterwp.com/docs/add-heading-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: What do I need before adding social icons in WordPress?** A: Nexter Blocks provides the Social Icon block as a free block, and it works in Nexter Blocks free and with Nexter Blocks Pro deactivated. The setup needs the block switched on under Nexter > Blocks in your WordPress dashboard, plus the profile URLs you want to link to. That matters because this block builds profile links, not share buttons, so each network needs its own destination. **Q: How do social icons behave in the Nexter Social Icon block?** A: The Social Icon block renders a list of linked icons, and each icon points to the profile URL you enter. Three networks are available out of the box on a default block: Facebook, Youtube and Twitter. The hover effect is applied as a class, so changing hover styles does not reflow the layout. That makes it easier to keep headers and footers stable while still changing the look. **Q: Can I use the Social Icon block for share buttons instead of profile links?** A: The Social Icon block is for profile links, not page sharing. If you want share buttons, use the Social Sharing block instead, because it builds each network’s share URL from the current page. That distinction matters in practice: social icons send people to your profiles, while sharing blocks send people to a post or page URL. **Q: Why does one social icon go nowhere when clicked?** A: That usually means the entry has no URL or the URL has a typo. Each icon uses its own link, so one bad entry does not affect the others. Since the block does not check whether a URL is a valid profile, a mistake can still look clickable even though it leads nowhere. **Q: Why did my social icon row get taller after changing the style?** A: Styles change the layout, not just the colours. On three icons, the default style rendered 68 pixels tall and style 3 rendered 120 pixels tall. If the row feels too tall in a header or footer, pick another style or reduce the icon size. That keeps spacing under control without changing where each link goes. **Q: How do I center social icons in WordPress?** A: Alignment needs to be set on the Social Icon block itself, not on the container around it. That is important because container alignment can leave the row visually off-center even when the wrapper looks correct. If you are building with Nexter Blocks or POSIMYTH Nexter, centering at the block level keeps the linked icons aligned as one unit.