Almost every site needs a row of social links somewhere – in the footer, beside an author bio, in a sidebar. Building it by hand means chasing icons and hand-styling each link.
The Social Icon widget in The Plus Addons for Elementor gives you 39 ready-made networks plus a custom option, 15 built-in styles, and a per-icon link, colour and label.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free. Everything in this doc works on the free plugin – we published the page with Pro deactivated and the result was identical. Pro adds only three per-icon extras: Magic Scroll, Tooltip and Mouse Move Parallax.
- Switch it on: The Plus Addons > Widgets, search Social Icon, turn the toggle on.
- The addresses of your profiles, ready to paste.
Steps
- Add the Social Icon widget to the page.
- In Content > Content, pick a Style. There are Style 1 to Style 15 and Custom.
- Open the first row of Social Network Select and choose the network from the dropdown.
- Paste the profile address into Link.
- Add a Title if you want a label beside the icon.
- Add a row per network, then set Alignment and, if you want a column rather than a row, turn Vertical Layout on.
What You Will See
On the published page the icons render in a row, each one a link to the address you typed. We built four – Facebook, Twitter, Instagram and YouTube – and every icon carried its own profile URL.
Titles and hover styles only appear on some styles
Title is shown on Style 1, Style 2, Style 4, Style 10, Style 12, Style 14, Style 15 and Custom. On every other style it is simply not rendered – we checked Style 3 on the published page and the labels were absent even though they were filled in.
Select Hover Style appears in the panel only when Style is Style 14 or Style 15. It offers Style 1 and Style 2.
| Setting | What it does | Default |
|---|---|---|
| Style | Style 1 to Style 15, or Custom | Style 1 |
| Select Hover Style | Hover effect – only for Style 14 and Style 15 | Style 1 |
| Link | The address the icon opens | # |
| Title | A label beside the icon, on the styles that support it | Empty |
| Alignment | Left, Center or Right – responsive | Center |
| Vertical Layout | Stacks the icons into a column | Off |
How It Behaves
- Vertical Layout stacks the icons. We turned it on and the four icons moved from one row into four rows, one under the other. It is hidden when Style is Custom.
- Alignment moves the whole group; setting it to Left put the row against the container’s left edge.
- Choosing Custom in a Social Network Select row lets you supply your own icon through Icon Options – a font icon or an SVG.
- Each row has its own Icon Color, Background Color and border colours, with separate hover values, so one icon can be branded differently from the rest.
Limitations
- The widget does not load an icon font of its own. On a page where nothing else loads Font Awesome the icons come out blank – we measured the glyphs at zero height on a clean page, and they appeared as soon as Font Awesome was present. If your theme or another widget already loads it, you will not notice this.
- Some network names in the dropdown are spelled unusually – Google +, LinkedIN, Wordpress, Tiktok, and two entries called Odnoklassniki and Odnoklassniki 1.
- A few networks in the list no longer exist as they did – Google+, Digg, LastFM, Foursquare and Slideshare are still offered.
- Magic Scroll, Tooltip and Mouse Move Parallax need Pro.
Troubleshooting
The icons are invisible but the links still work
Nothing on the page is loading Font Awesome. Add an element that does, or use Custom with an SVG icon.
My titles do not show
Switch Style to Style 1, 2, 4, 10, 12, 14, 15 or Custom. The other styles never render Title.
There is no Select Hover Style dropdown
It only appears for Style 14 and Style 15.
The icons stay in a row
Turn Vertical Layout on. It is hidden while Style is Custom.
Not verified
So you know exactly what has and has not been checked:
- The Custom network option with a font icon or an SVG.
- The Pro extras – Magic Scroll, Tooltip and Mouse Move Parallax.
- Continuous Animation, Max. Width, and the Style tab’s gap, size, border and shadow controls.
- Styles other than Style 1, Style 3 and Style 14, and the hover effects themselves.
