Pop Up Image

Get the Full PDF guide to creating an online store with WooCommerce (88 pages) for FREE

A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

A Complete Guide to Social Icons Widget

A Complete Guide to Social Icons Widget

Social icons are an essential part of any website. It doesn’t matter what kind of website it is – if you have social media profiles, they absolutely need to be linked to your site. It’s one of the golden rules of surviving online these days and building your brand.

The main purpose of social icons is to help you connect swiftly with your visitors. In this day and age, it seems that everyone is online, on one social media platform or the other.

It’s important to remember that, a lot of times, people don’t want to bother actually entering a website. Instead, they follow a brand on its social media page and get their updates, news and information from there.

That’s why it is vital for every business to have a strong social media presence and to regularly update the profile with information retrieved from the website.

Of course, you will need a strong follower base and one of the ways to do so is to add social icons to your site. Clicking on those icons, visitors are redirected to your social media profile, where they can become your followers. They will always be up to date with your posts and news, which is going to be highly beneficial for your brand.

Social Icons Widget Plugin

Social Icons Widget is an excellent way to add social icons to your website. This social icon plugin allows you to add quick links to all your social profiles in no time, plus it doesn’t require any special knowledge. You don’t need to know how to code, a basic level of computer literacy will do.

This social icon plugin adds quick links or icons anywhere you want on your website, which your visitors can use to access your social media profiles.

This life-saving plugin supports over 80 social networks. We bet you didn’t even know there were so many of them, did you? Well, Social Icons Widget supports them all.

In addition, you can rearrange and sort the icons by drag and drop, apply one of the many available styles and customize the icons. Color picker has recently been made available, so you can change icon color into anything you like.

Retina-ready icons, FontAwesome integration and support for Skype, Viber and WhatsApp are other features that set this plugin apart from the others.

As for the actual use of the social icons, you can place them in your sidebar, your footer or any of the pages of your site. The choice is yours. Plus, the plugin is regularly updated with new features and new icons are constantly added.

Social Icons Widget Plugin

Basic Settings

Upon the installation of the plugin, a new widget appears. Drag it to the desired area and that’s half the job done already!

Also, if you prefer to monitor the changes you’re making in the same window, you can edit your widgets from Appearance > Customize > Widgets, just like you do for adding and editing all your other widgets.

Editing Social Icons Widget

Social Icons Widget is a very user-friendly plugin. It’s easy to set up from the backend and to customize it according to your needs.

The first thing you want to do with your brand new social icon plugin is to add links to your social media profiles:

  • Type in or paste your links
  • After you insert the address, the corresponding social icon will appear. This, however, applies to the biggest, most widely used social networks. As we said earlier, Social Icons Widget supports more than 80 social media platforms and for some of them, the icon doesn’t appear automatically.
  • To add a link for your email, make sure it’s in the following format: mailto:yourmail@example.com.
  • For changing the order of the icons, use the arrows located next to each of them.
  • To delete changes in case you make a mistake, use the trashcan to the right.
Social Media Profiles
  • Clicking on the icon opens a field where you can pick the icon you want to use. The plugin itself suggests an icon, but, of course, you don’t have to go with that suggestion.
  • Another thing you can choose is the color of the icon and the hover, as well as pick one of the several different icon fonts.
Pick Social Icon

Unlike these settings, where we make modifications to each individual icon, there are general settings as well. General settings apply to all the social icons we’re using and they’re useful for when we want to make changes too all of them in bulk.

Social Icon Color

In the following field, you get to add a title to your social icons widget, as well as a description to be displayed above. You can use basic HTML, if you know how.

For example, we inserted Fresh <i>content</i> delivered daily, <b>enjoy</b>!

Social Icon Title and Description

And here’s the result:

Social Icon Example

A great thing about the Social Icons Widget is that it uses the default font settings from the sidebar. This way you can rest assured everything will be consistent with the rest of the page. The space is a bit uneven but we’ll take care of that later on.

Another very useful thing that comes with this social icon plugin is the Open links in new tab option and setting the nofollow link. To apply these, simply check the corresponding box.

Social Icon Plugin Settings

As for the Show icon labels, this option allows you to set whether there will be some sort of title next to the icon. It can be a default title, if the plugin recognizes the icon, as it is the case with the Facebook icon. You can add your own title, of course, using the field located above the website address field.

Social Icon WordPress

Next, you can set the alignment: None, Left, Center, Right. You can also pick between two available icon styles.

Another thing you can set is the icon size and icon padding, which is the padding within the icon itself – between the symbol and the border.

Social Icon WordPress Style

As for the icon background style, you have three options to choose from:

WordPress Social Icons

Advanced Settings

We have mentioned earlier the space, or specifically – padding, between the description and the social icons. If the spacing is too small, too big or uneven, you can fix it by adding a few simple lines of CSS.

Go to Appearance > Customize and look for Additional CSS.

Use the left side of the editor to add the code and follow the live changes to the right. In case the page you want to work on is not displayed in the field to the right, feel free to use the menu to navigate the site and reach the page in question.

Social Icon Advanced Settings

Use the following code to add the padding between the description and the icons:

.zoom-social-icons-list {padding-top: 15px !important;}

Of course, we used 15px just for the sake of example. You can use a different value, the one that makes sense on your page. Inspect your elements and find the perfect padding size.

Another kind of spacing that you will probably want to take care of is the space in front of the row of icons.

Social Icons Widget Plugin Edit Padding

Use the following line of code:

.zoom-social-icons-list {margin-left: 0px !important;}

Again, you will set your own value here, instead of the zero we used in the example. Note that this and the previously mentioned line of code refer to the same .zoom-social-icons-list class.

To set both values at the same time, you’re going to use that class and add both values, like this:

.zoom-social-icons-list {padding-top: 15px !important; margin-left: 0px !important;}

You can also set the value for the padding or the space between the icons themselves. If the current padding is too big or too small, you can change it by entering the following code:

.zoom-social_icons-list__item {padding-right: 10px !important;}

Once again, these are just the example values – you will insert your own.

Another thing about your social icons that you can customize is their border. For instance, you may want to make all your social icons the same color with a different colored border around them. For example:

Social Icons Widget Plugin Edit Border

This is actually very easy to do. We already explained how to make all the icons the same color. Use the Inspect tool to find your icon’s class. The one we’re looking for is socicon-nameofthenetwork.

Social Icon WordPress Inspect

In our case, the code for adding a border to a Facebook icon would be:

.socicon-facebook {border-style: solid !important; border-color:#00007f !important;}

Of course, you will pick your own color, and as for the border-style, look into CSS and you’ll see that in addition to “solid” there are other style options available as well.

Therefore, for each of the icons you want to add the border to, you will add a piece of code with the desired values.

Adding Social Icons to Pages

You can use the widget to add social icons not only to your sidebar or your footer, but to other parts of the site as well. In fact, you can add them to any page, as part of any page content.

First, you need to install the Widget Shortcode plugin:

Widget Shortcode

This plugin works by inserting an additional field within each of the used widgets, containing the shortcode for the widget in question. In this case, it adds a field with the shortcode for Social Icons Widget within the widget itself.

Widget Shortcode Field

Simply copy the code and insert it where you want it. After that, your social icons, with all the settings you made in the widget, will appear in the desired place.

Final Thoughts

So there you have it, a quick and easy way to add social icons to your website. With the help of WPZOOM’s excellent Social Icons Widget plugin, you can link to all your social network profiles in no time, letting your visitors easily get in touch with you on all social media channels.

P.S. We recently had a chat with the team over at WPZOOM, and they told us we can expect lots of updates and new features for the Social Icons Widget plugin in the future. So make sure to tune in to their blog to stay up to date with all their latest news and releases.

We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Comments (1)

  • Avatar
    Pavel Ciorici

    Thanks a lot for your thorough review of our plugin!

    reply

Leave a Reply