Social icon :

Social icons are a vital part of your website, allowing users to connect with your social media platforms such as Facebook, Instagram, Twitter, and more.

How to add social icons to a WordPress website?

To access your WordPress site admin, open it in Google Chrome or any other search engine platform. You can access Appearance in the sidebar menu and view the available submenus by clicking on it.

Unfortunately, some WordPress themes do not have the capability to add widgets. The Twenty Twenty-Three theme does not have the ability to add a new theme. The Twenty Twenty-One theme possesses this capability.

Simply click on the Widget submenu under Appearance. On the right side, you can add widgets to your website.

We now have the ability to include social widgets in the footer. Click on the footer tab and click the plus icon (+) located at the bottom of the footer sections. We can now search for social icons to add in the footer section.

Next, a small box should be added to the footer section under the Categories section. Click on the plus icon that says “Click plus to add” to access a popup. From there, select the desired social media icon to add to the list.

Here we want to add a Facebook icon in the footer section. We just write Facebook in the search bar and click on the Facebook icon button.

Including a Facebook link in this icon is possible, which would redirect to a specific account and position. In this article, we will add Mark Zuckerberg’s Facebook account with the Facebook icon.

Simply click on the Facebook icon and paste the URL.

Click on the “Update” button in the right sidebar menu to save your settings. Once you’ve saved your settings, the Facebook icon will appear in the website footer section.

I noticed that the Facebook icon is now located in the website’s footer section. You can simply click on the Facebook icon, which will redirect you to Mark Zuckerberg’s Facebook page in a new Chrome tab.

How can I style my social media icons?

After adding the social icons, click on the icon. A small settings menu will appear.

Align Icon :

To align social icons horizontally, simply click on the icon with the fifth number. We can align text to the left, center, or right, or evenly space it horizontally.

To align social icons vertically, simply click on the icon with the sixth number. We can align text to the left, center, or right vertically.

These same settings will appear on the right sidebar. In the layout section, we have the option to align the icons that are displayed, and It has the ability to orient vertically or horizontally.

On the right sidebar, there is a feature that can enhance the functionality of social icons. When we turn on the “Open links in new tab” option, any links we click on will open in a new tab instead of the current tab. This can be helpful if we want to keep our current page open while also exploring a linked page without losing our place. It’s a convenient feature that can make browsing the internet a lot smoother.

If you want to display the name of the social icon next to the icon itself, simply turn on the “Show labels” option. This feature will automatically add the name of the social icon next to the corresponding icon, making it easier for users to identify and interact with their favorite social platforms.

To add a custom CSS class to a specific social icon :

The right sidebar setting has an advanced option in which option to add a custom CSS class to a Social icon for a custom style. Now we can add a CSS class for custom  CSS(Cascading Style Sheets). If we add a CSS class, we can see this CSS class in the developer tool. I am adding “custom_social_class” in the Facebook icons and checking this in the developer tool.

Logo style :

On the right sidebar, there is a style icon that is located opposite to the gear or wrench icon. Click on this and we can see different options for the styling of icons.

Another section under this has the ability to change the logo color and and background color of the logo.

After these two sections, the Dimension option is shown, which is used to add padding on the top-bottom and left-right sections of the social icons widget.

Leave a Reply

Your email address will not be published. Required fields are marked *

Optionally add an image (JPEG only)