How To Add Social Media Icons To WordPress Header? (Question)

How to Add Social Media Icons to Header or Footer

  1. Go to Appearance → Customize.
  2. Expand the Menus panel.
  3. Select the menu to edit or +Add a Menu.
  4. Click +Add Items.
  5. Check the menu location where you would like the icons to appear.
  6. Click Save & Publish.

Contents

How do I add social media icons to WordPress header without plugin?

Search for and download official social media icons.

  1. Go to the WordPress Dashboard section, hover mouse to “Media”, then select “Add New.”
  2. From the Media Library, open the icon’s image, and copy the direct link.
  3. Select Appearance > Widgets.

How do I add social media icons to WordPress menu?

Adding social media icons to the header in an existing menu

  1. In your WordPress dashboard, go to Appearance > Customize > Menus.
  2. Go to the Header section and press the Add items button.
  3. Then select the icon of the social media platform you want to add, enter the URL, and press Add to Menu.

How do I add social media icons to WordPress footer?

How to Add Social Media Icons to Header or Footer

  1. Go to Appearance → Customize.
  2. Expand the Menus panel.
  3. Select the menu to edit or +Add a Menu.
  4. Click +Add Items.
  5. Check the menu location where you would like the icons to appear.
  6. Click Save & Publish.

How do I change my social media icon?

Click anywhere on the Social block to open the editor and click Edit. In the Social Block Settings panel, click “Styles” under the type of social media icons you want to style. Click on the different color options to apply it to your social icons until you find the one that best suits your branding.

How to Add Social Media Icons to WordPress Menus (Easy Way)

Is it important to you to have social network icons in your WordPress menu? In spite of the fact that WordPress does not provide a section for social network accounts, you can quickly add and display social media icons on any widget-ready part of your website by using WordPress navigation menus. It is our goal in this post to teach you how to include social network symbols into your WordPress navigation menus.

Why You Should Add Social Media Icons to Menus?

The most significant advantage of including social media icons in WordPress menus is the ability to rearrange the order in which they appear via the use of a simple drag and drop interface. It is possible to display social media symbols in your sidebar by utilizing third-party plugins; however, the majority of these solutions are less versatile. Additionally, when you add social media icons to WordPress menus, they may be shown on any widget-ready location of your site, such as your sidebar, footer, underneath posts, and so on.

As a result, let’s take a look at how you may quickly and effectively add social media icons to your WordPress menus.

Adding Social Media Icons to WordPress Menus

The first step is to download, install, and activate theMenu Imageplugin on your computer. For further information, please refer to our step-by-step instructions on how to install a WordPress plugin (included). Following activation, you must navigate to theMenu Imagepage inside your WordPress administration section. Following that, you will be able to customize the picture sizes that will appear in your menu. You have the option of leaving the sizes at their original settings or modifying them to meet your requirements.

  1. Once you’ve completed this, you’ll need to navigate to Appearance » Menus in your WordPress administration area.
  2. You may then give your menu a name and click on the ‘Create Menu’ button to begin the creation process.
  3. Input the URL of your social network page, along with any link text you want to include, then click the ‘Add to Menu’ button.
  4. After that, if you hover over your freshly constructed menu, you’ll notice an option that reads ‘Menu Image,’ which is what you should select.
  5. In the next seconds, a popup window will emerge with all of the options for your social media symbol.
  6. If you choose the Image option, you will be able to submit an image of the social networking site by selecting the ‘Set image’ option from the drop-down menu.
  7. On the other hand, you may pick the Icon option and then choose a social networking icon from the drop-down menu that appears.

Alternatively, if you simply want the social icon to be displayed and not the associated label, you may pick the ‘Hide’ option under the Title position setting.

Simply repeat the process to include as many social media icons as you require.

It’s also possible to include a social symbol menu in your WordPress sidebar.

You should choose the social menu that you built above from the Select Menu dropdown menu, and then click on the ‘Save’ button to save your changes.

You will need to apply custom CSS to the widget in order for it to look precisely like that.

We hope you found this post useful in learning how to include social media symbols in WordPress menus.

We encourage you to subscribe to our YouTube Channel for more WordPress video tutorials if you enjoyed this post.

Please be aware that our material is sponsored by our readers.

See how WPBeginner is supported, why it is important, and how you can help us by donating. The Editorial Staff at WPBeginner is a group of WordPress specialists, lead by Syed Balkhi, who provides guidance and support. Over 1.3 million readers around the world put their trust in us.

How to Add Social Media Icons to Header or Footer

Adding social media connections to any menu place is simple with the Layers is available in three licensing tiers to match your requirements: Single, Multi-Site, and Developer. The cheapest license cost is $49, which includes lifetime upgrades and support. Learn More About Layers Pro by visiting their website “a href=” blank”>a href=” blank”> Layers Pro is a software application that allows you to create layers of information. A wide range of additional functionality is provided by Layers Extensions, ranging from gallery and team widgets to customized post kinds and animations.

The website’s target=” blank” “In the Menus administration page, there is an extension that adds an array of icons to the Custom Link tab.

Depending on the context, class can refer to a particular property present in HTML elements that permits selection of those components in CSS, or it can refer to a set of variables and functions that deal with these variables when used in PHP.

CSS Class

In HTML, this would be: a class= buttonhref=> It is possible to style an element by using its class attribute ofbutton, which is present on the element in question and on any other element having the button class property. The following is written in CSS:.button

PHP Class

See class” target=” blank”>classes in the PHP Manual” target=” blank”>classesin the menu link choices as normal. You can see an example of this in action in the Footer menu on this site as well as in our demonstrations.

  1. Expand theMenuPanel by clicking on it. Select the menu you want to change or create a new menu. Items may be added by clicking on them. Choose an icon from the drop-down menu and input the entire URL of your social media profile. Example:
  2. Check the menu place where you want the icons to display and make any necessary adjustments. ClickSavePublish

Several action hooks in the header and footer, for example, make use of the addition of social icons or other custom HTML. Take a look at the following resources: It is possible to add custom controls to the Customizer for establishing links in a parent theme, which allows you to alter or add functionality to that parent theme’s existing functionality. According to the WordPress Codex, the article on child themes demonstrates how to develop a simple child theme and describes what you can do with it.

To create a directory, use FTP or whatever file management program your web server provides to upload files.

Related Reading:

For Layers, Child Theming is used. See our example in the Custom Controls section of the developer handbook for how to create a child theme or plugin that does not need hard-coding urls using HTML. Our colleagues at Jetpack are hard at work making the WordPress experience better for everyone who visits their site. Check out Jetpack to increase the security, speed, and dependability of your website.

How to Add Social Media Icons in the Header?

In order to promote companies, social media is becoming an increasingly important aspect of the website. It is critical in increasing the number of followers on social media platforms. With the use of widgets, Astra makes it possible to include social media symbols in the header. You may personalize the social icon widget and attach it to the Astra header using any other plugin that you like. The following are the steps to add the widget to the primary header: 1. From within the WordPress admin, go to AppearanceCustomizeHeaderPrimary Menuand pick theLast Item in MenuWidget as your first option.

All widgets will be accessible from this section of the list. With any plugin, you have the option of adding extra widgets. Astra Widgets is the plugin that works the best with the theme and gives the quickest and most convenient method of adding widgets. You can include the following –

  • Astra: Address
  • Astra: List Icons
  • Astra: Social Profiles
  • Astra: Contact Information

If you require more widgets beyond those listed above, you can experiment with extra plugins such as — Here is a video that demonstrates how to include a WordPress widget in the header of the Astra theme —

Adding Social Media Icons to Your WordPress Site

Having a presence on social media has become increasingly important in recent years, to the point that failing to do so might have a detrimental influence on your company’s bottom line. It is not enough to simply have a website; you must also ensure that it is connected with your social media accounts. There are a variety of things you can do to direct visitors from your website to your social media accounts. The most effective way for WordPress users, on the other hand, is to install one or two specialized plugins.

This post will explain how to include social networking symbols into your website, as well as provide a list of plugins that can assist you in the process.

How to Add Social Media Icons in WordPress’ Header

Before we get started, it’s important to note that you can use one of the plugins we’ll discuss later to add social network icons to the top of your website’s header. However, there is sometimes a far simpler way to accomplish this that does not include the installation of any additional software. When looking for a solution, the first place to go is inside your present theme. Many themes feature choices for including social media symbols on your website, as well as the ability to customize the display area: for example, you may choose the following: If your theme does not include this option, you have three options to choose from.

If you choose the second option, you’ll want to seek for something that is adaptable while still being well-suited to your specialty.

Non-coders, on the other hand, will appreciate the simplicity of use that a multi-purpose theme such as AvadaorDivi gives.

How to Add Social Icons to Your Menu in WordPress

In addition to including social network icons in your header, you may also wish to include them in your WordPress menus. Given that menus are highly visible to the majority of your site’s visitors, this is a wise decision. Your current theme may allow you to link to your social network accounts from your menu, similar to how you may link to them from your header. There are several themes that offer this as a basic function, including the default options like as Twenty-fifth (25th): Adding custom social network icons to a theme that does not already feature this capability is a straightforward process that can be accomplished in a few easy steps.

  1. Create a child theme in order to ensure that your modifications are preserved
  2. Font Awesome should be enabled through your theme’s functions.php file. In WordPress, you can add CSS classes to your navigation menu by going to the AppearanceMenus panel and selecting CSS classes. If required, use the style.css file included with your theme to style the icons.
You might be interested:  How To Remove Proudly Powered By Wordpress?

For people without a great deal of technical knowledge, this procedure can be a bit difficult to navigate at times.

So let’s have a look at a number of WordPress plugins that may accomplish the same goal as described above.

WordPress Social Media Plugins

The numerous techniques for including social media symbols in WordPress have been demonstrated in this article. However, when compared to the use of an appropriate plugin, nearly all of them pale in contrast. After all, plugins, which often allow for extensive modification, are far more user-friendly than traditional manual procedures. Let’s have a look at a few tools that you could find useful.

Easy Social Share Buttons for WordPress

First and foremost, Easy Social Share Buttons for WordPressis one of the best premium options available for adding social network icons to your WordPress website. It is available for purchase on the WordPress plugin repository. It’s an extraordinarily comprehensive tool that, when compared to its competitors, is unquestionably the best. In addition, this plugin provides choices for adding social media symbols to a variety of areas on your website — including pop-ups, floating “sticky” bars, and other elements.

Easy Social Share Buttons for WordPress is available for purchase on CodeCanyon for $20, and it should be towards the top of your shortlist of potential candidates for inclusion.

Jetpack’s Social Media Icons

Because of its modular-based approach to building site functionality, Jetpack has become a go-to option for many WordPress users. Plus, it’s completely free! The Social Media Icons module in Jetpack is a no-fuss solution to ensure that visitors can easily access your different social media channels, regardless of where they are now surfing on your site. Rather from requiring you to include social network icons in your header and menu, this plugin allows you to show your social media accounts in the sidebars of your website.

A small number of popular broadcasting channels are available, but each is simple to set up.

Additionally, when used in conjunction with another module –Custom CSS– you may do rudimentary icon customisation.

Simple Author Box

Last but not least, the freeSimple Author Boxplugin does exactly what it says on the tin: it allows you to create simple author boxes. Using it, you can easily add a box to your website that contains your Gravatar as well as your name, domain, and other important information – such as social media symbols. This is a wonderful solution for blogs that are primarily focused on authors. Adding the author box to your posts will display it at the end of each post, and you can also include it in your customsingle.php or author.php templates if you choose.

When it comes to the channels you may promote, there are more than 30 to select from.

Get Support for More Common WordPress Questions From WP Engine

It takes effort to be successful on social media, just as it takes effort to build a website that is search engine optimized. When you combineWP Enginewith a social media automation solution, such asSocial Media Suite, you may significantly increase the effectiveness of your social media activities.

WP Engine provides exceptional dependability as well as a knowledgeable support team to assist you. This is shown via our dedicatedResource Center. It’s jam-packed with practical, everyday advice to help WordPress users when they need it the most. Take a look at it right now!

How to Add Social Media Icons to WordPress Menu (Step By Step)

If you are running a business or a personal website, you must ensure that people can easily share your material on social networking platforms like Facebook and Twitter. To demonstrate how to incorporate social networking icons into your WordPress menu, we’ve written this article.

Why Add Social Media Icons to the WordPress Menu?

According to recent research, approximately half of the world’s population is a member of at least one social networking website. It is possible to build your social media presence by connecting your website with Facebook or by adding Instagram feeds to your website, but there is something more you can do to increase your social media presence. It is one of the most visible parts on your website, so make it stand out. Aside from that, it’s one of the very first things that consumers see when they arrive at your website.

As a result, you may add social network icons to your WordPress menu in order to personalize your site and make the most of your social media channels.

Despite the fact that certain themes, such as Divi, provide the ability to add social media icons to the menu, the majority of themes do not contain this functionality.

We’ll show you three simple strategies to effortlessly include social media icons in your WordPress menu in this post, so read on!

How to Add Social Media Icons to your WordPress Menu

When it comes to adding social media icons to your WordPress menu, there are three primary options:

  1. Using the theme customizer, create a new theme. Using FontAwesome icons that were manually created

Each approach will be described in detail in this book, allowing you to select the one that best suits your needs.

1) Plugins

Using plugins to integrate social media icons on your menu is the quickest and most convenient method. Due to the large number of possibilities available, we have selected two of the most effective plugins available to make your life a little simpler.

1.1)QuadMenu

With QuadMenu, you can quickly tweak and elevate your WordPress menus to a higher degree of functionality. This is a freemium plugin with limited functionality. Among the options are a free version with limited functionality and three premium subscriptions that include more sophisticated functionality as well as priority assistance. You’ll need the premium version if you want to include social network icons in your menu. To learn how to install and activate the plugin on your website, continue reading.

Installation and Activation

To begin, you must first purchase the plugin and download the necessary files to your computer’s desktop. Then, before you can install it, you must first install the free version of it on your website. To do so, navigate to your WordPress dashboardPluginsAdd New. Then, using the search box, seek for QuadMenu in the results. After that, click Install, followed by Activate. After activation, you may utilize the files from the premium version that you previously downloaded to install them on your website.

When you in into your QuadMenu account, you will see the Licenses option on the dashboard.

The plugin is available for purchase in our shop, on Envato, and on the Elegant marketplace; thus, utilize the dropdown menu to choose the most relevant choice for you. After you have verified it, you are ready to travel.

Add social media icons to your WordPress menu with QuadMenu

QuadMenu is compatible with any theme, free or paid. Although we will be using GeneratePress for this demonstration, the technique is the same for any other theme. To begin, navigate to the plugin’s settings by selecting QuadMenuOptions from the drop-down menu. There are various customization options available, including the following:

  • The primary menu
  • A submenu
  • Responsive
  • The default theme is used. Customize
  • Social
  • Importing and exporting
Configure social options

Adding social media icons to our major menu is what we’re looking to do in this scenario. As a result, we’ll go with theSocialoption. You will notice a number of default choices, which you may modify or remove based on the channels you have available. They have already associated social media profiles with their respective symbols. You may, however, personalize them by selecting the+ Add Iconbutton from the toolbar. Additionally, by hitting the Plus button, you may add new social media outlets to your account.

  • When you click on the + Add icon, a pop-up window will appear with a variety of icons from which you may pick.
  • As you can see, we looked for Facebook symbols during our search.
  • You may also edit the titles and URLs of the documents.
  • Following that, navigate to the WordPress menus.
  • The QuadMenu choices on your menu must be designated as QuadMenu Devunder the Menu settings in order to be accessible.
  • The QuadMenu selections will be shown on the following page load.
  • Add them to the menu by selecting them and pressing Add to Menu.
  • When you move your mouse cursor over the QuadMenu, you will see the customization choices.
  • Other than that, simply click on theSave Menubutton and you’re ready to go.
Icons on the menu (Frontend)

It is now necessary to review the outcomes. So, go to the homepage of your website and you will see the social media icons. Additionally, when you hover over them, the icons will be displayed. That’s all there is to it! With QuadMenu, you have successfully incorporated social media icons to your WordPress menus, which is a great accomplishment.

1.2) WP Menu Icons

Don’t be concerned if you are unable to buy any premium plugins. We’ve got a free solution for you right here. In this part, we’ll teach you how to integrate social media icons into your WordPress site using a free plugin called WP Menu Icons.

Installation and Activation

First and foremost, you must install and activate WP Menu Icons on your website.

Aside from being extremely simple to use, this tool does not require any extra modification.

Customizing Menu Icons

It is possible to build a menu on your site from the setup area if you do not already have one. After you’ve assigned a location to your menu, you’ll be able to begin adding items to it. Custom Links is the item to use if you want to include links to your social media profiles in the menu. You will be required to provide the URL of the page to which you wish to connect as well as a label. Then select Add to Menu from the drop-down menu. Following the addition of the icon to the menu, the settings page will appear as shown below.

  • In this particular situation, we’ve included icons for Twitter, Pinterest, and Instagram in our menu.
  • That is the parameter you must utilize in order to add icons to the menu items, so make sure you do so.
  • Because there are dozens of icons, you should utilize the search option to narrow down the results to what you desire.
  • Following your selection of the icon, you will see the icon settings in the right column of the screen.
  • In this particular instance, we’ll conceal the label.
  • In the same manner, you may edit the Pinterest, Twitter, and Instagram icons on your website.
  • It is now necessary to review the outcome.
  • Using WP Menu Icons, you can easily add social networking icons to your header menus in WordPress, as seen above.

2) Add Social Media Icons with the Theme Customizer

If you don’t want to install any plugins, you may use your theme’s customizer to incorporate social media icons in your menus instead. Avada and Divi are two premium themes that come with integrated theme panels that allow you to tweak the theme and add social media icons. Newspaper and Divi are two more premium themes that come with integrated theme panels. If you’re not sure whether your theme includes the option to include social media icons, navigate to AppearanceCustomizeMenusView Locations in your WordPress dashboard and look for a social menu or social symbol option.

  1. To begin, navigate to your WordPress dashboardAppearanceCustomize.
  2. You will find an option to activate social icons in the top section of the page.
  3. It is also possible to personalize them by visiting the DiviTheme Options page.
  4. In the default configuration, the social network icons will display in both the header and bottom of your website.
  5. Other themes, such as Newspaper and Newsmag, offer their own set of customization options, which you may access through a special theme panel.

You can enable and deactivate icons, as well as show them. If you are unable to locate the social media icons area in the theme customizer or panel, please leave a comment below and we will make every effort to assist you.

3) Using FontAwesome

Last but not least, you may manually include social media icons in your WordPress menus. Using a few lines of HTML code, you may show social network symbols on your website even if you are not a developer or do not have coding expertise. FontAwesome’s icons will be used to do this. So the first thing you should do is visit the FontAwesome website to get started. Make use of the search function to locate the icons you want. For the sake of this demonstration, we will look for Twitter symbols. The search results will be displayed on the next page of the website.

You will see the specifics of the symbol you picked on the following page, so simply copy the HTML code for the icon from that page.

Adding Font Awesome Icons To WordPress

Go to the menus area of your WordPress website and make your changes there. The section for custom links may be found on the left-hand side of the page. You will be required to input the URL of your Twitter profile as well as the HTML code that you have just copied into the Link Textfield on the next screen. Once you’ve done that, click on “Add to Menu.” After that, be sure to save your modifications. Then navigate to the frontend of your website, where you’ll see the symbol. This manner, you will be able to include any social media symbol in your menu as you see appropriate.

HTML code doesn’t work

If you’ve completed all of the steps in this article but the HTML still doesn’t work, try the following. If thefabcode doesn’t work, try modifying the HTML code by eliminating theb from thefabcode’s beginning. As an example, the final HTML code in our situation will look somewhat like this. instead, use I class=”fab fa-twitter”/i instead of I class=”fab fa”/i. Example:

Add social media icons to the WordPress header

Let’s take a brief look at how to add social network icons to your website’s header, which is one of the most common areas to do so. We’ll use the Theme Customizer to do this. It’s important to note that you’ll need a theme that provides you the option to include social network icons in your navigation menu. It’s also important to remember that the procedures may alter somewhat depending on your theme; nonetheless, you should be able to follow the instructions without any problems with the majority of themes.

You might be interested:  How To Add Adobe Fonts To Wordpress?

Adding social media icons to the header in a new menu

  1. Navigate to the AppearanceMenus section of your WordPress dashboard. Create a new menulink next to theSelectbutton by pressing thecreate a new menulink button and giving it a name
  2. Now you can add the icons to it. After creating a brand-new menu, key in the social media profiles and URLs you wish to include (such as those for Instagram and Facebook), then click “Add to Menu.” Save the changes
  3. After that, insert the menu you just built into the header area of your website. Save your modifications, and you’re finished! How to add social networking symbols to the WordPress header is explained in detail here.

Adding social media icons to the header in an existing menu

  1. Navigate to AppearanceCustomizeMenus in your WordPress dashboard
  2. And Navigate to theHeadersection and click on theAdd itemsbutton to begin. Then click on the symbol of the social networking platform you wish to include, type in the URL, and click on the button labeled “Add to Menu.” You must repeat the process for each social media platform to which you wish to subscribe. Select the menu item in which you want the icons to appear and click OK. The options available to you will be determined by your theme. Save the changes you’ve made. That is all there is to it.

Alternative options include adding icons to the footer, which may be accomplished by following the same procedure but selecting Footer as the icon’s destination.

Bonus: Open social media icons in a new tab

Including social network icons in your WordPress menu will aid in the expansion of your social media presence on the web. In this case, the problem is that when a user clicks on the icon in your menu, the social network page will load in the same window, and the user will be sent away from your website. Changing the social networking icon to open the website in a new tab will solve the problem. Let’s have a look at how to accomplish it. Open the AppearanceMenus in your WordPress dashboard, click onScreen Options in the upper right corner, and check the Enable Link Target option.

Select the Open link in a new tab checkbox for each menu item after that. If you like, you may set each target to blank instead of to target. Finally, save your modifications and you’re finished!

How to add social feeds to your site

In addition to including social network icons in your menu, you can also provide social feeds on your website to encourage customers to interact with you more. We’ll teach you how to integrate Instagram and TikTok into your website in this section.

Add an Instagram feed to WordPress

The Social Feed Gallery plugin is the quickest and most convenient method to integrate Instagram into your website. You may show your Instagram feed in only a few clicks using this freemium tool, which is available to everyone. First, download and install the plugin from this site. Then, activate it. Afterwards, navigate toSocial Feed Galleryandlog into your Instagram account. Afterwards, navigate toSocial Feed GalleryAccounts, where you’ll be given the choice of logging into either your personal or company account (keep in mind that the business account has more options).

Once that is completed, navigate to theFeedstab and press+Feed to add the feed you wish to show.

Visit our guide on how to integrate Instagram with WordPress for further details.

Add a TikTok feed to WordPress

In a similar vein, you may integrate your website with Tik Tok. We’ll use a plugin called WP TikTok Feed to show TikTok feeds, which is specifically designed for this purpose. This is the most popular TikTok plugin for WordPress, and it is available in both a free and a paid version, with a few premium plans available. Following the installation and activation of the plugin, you will need to link your TikTok account in your WordPress admin and then navigate toTikTok FeedFeeds. From there, select+Feed and enter the feed URL you wish to show.

For more details on how to embed TikTok videos in WordPress, please see our guide on how to embed TikTok videos.

Conclusion

Overall, including social network icons in your WordPress menus is a great approach to increase your social media presence and increase your traffic. In this article, we’ve seen three distinct approaches of accomplishing this goal: There is no need to utilize any additional plugins or HTML code if your theme includes the ability to add icons by default. In the event that you would like a plugin, we propose QuadMenu. It will give you complete control over the modification of your whole WordPress menu, and it also includes a slew of useful functions.

It’s a straightforward tool that will assist you with including social media icons in no time.

The icons may also be customized with a little CSS, or you can choose to skip the style and use the pre-installed icons instead.

Have you found this article to be of assistance? If you did, please let us know in the comments section below and spread the word on social media. Check out the following tutorials for additional information on this topic:

  • The best WordPress plugins for including social network feeds
  • How to integrate Facebook group feeds into your WordPress site

How to Add Social Media Icons to WordPress (header, footer, menu etc)

Elfsight engineers have created a Social Icons widget that will assist you in increasing the number of people who read your own social media accounts on a regular basis.

What you get by adding Elfsight Social Icons to your website

60+ of the most beautiful icons from the most prominent social networks and media sites, including YouTube, Google+, Instagram, Email, Twitter, Tumblr, Facebook, and others, are included.

Video Guide: install the icons to website page

If you want assistance with plugin installation or configuration, please contact our help center atHelp Elfsightas soon as possible. Authorize in your account and follow a few simple steps to integrate the widget into your website’s design. It will only take a few minutes to complete.

Generate a widget

Configure the style and make a copy of the installation script for future use.

Register at Elfsight Apps or sign in

Create a user profile. In order to start with the installation, you must either authorizein your account at our cloud-based service or log into your account.

Choose «Social Media Icons» plugin

Go to the plugin page and download the plugin from there.

Copy the code

Make a copy of your unique plugin code for future reference.

Part 2: add the icons to your WordPress site

To make changes to the site, you must first log into your profile.

Add the icons to header, footer, menu or other template

Select the “Appearance” tab from the left-hand menu and then “Editor” from the drop-down menu. The plugin should be placed in a template (footer, header, menu, or other area) that you have chosen. Paste the plugin code into the template. To save the changes, select “Update File” from the File menu.

Plugin installation is complete!

You may see the results of your labor by visiting the website you created.

Running your widget after the installation

If you want to alter the appearance of the icons after the product has been shown on a WordPress website, log into your Elfsight Apps account and make the necessary adjustments. Immediately following your confirmation of the modifications, they will be instantly integrated into your plugin.

Key features of using the Social Media Icons

The following are the most significant advantages of icons:

  • More than 55 high-quality social networks and media sites icons in a single library (Facebook
  • Instagram
  • Email
  • YouTube
  • Google+
  • Twitter and Tumblr, among other things)
  • You will find over 1 500 variations of visual alterations, including completely variable dimensions and colors, as well as six fantastic styles and five innovative animations – everything you could possibly need to customize the program to perfectly suit your site
  • You are no longer have to fine-tune the icons in Photoshop or make changes to the CSS of your website
  • Our program reduces the size of your page, which has a positive influence on the speed with which your website loads.

Create your own personal style and stay in contact with your website visitors from any location.

Briefly about Elfsight Apps

Elfsight is a worldwide service that provides widgets for a variety of content management systems (CMS) and website builders. Check out our widgets’ free versions to see how they may help you increase the efficiency of your online platforms right away!

Savor the WordPress Social Icons in 1 minute!

Create social networking icons for your personal website completely free of charge.

How to Add Social Media Icons to the WordPress Footer

Social media platforms aid in the popularization and well-knownization of businesses and websites among their target customers. It increases brand recognition, which has a variety of benefits. Knowing how to include social media icons in the WordPress footer will help you do the following:

  • Increase your SEO ranking
  • Gain significant word-of-mouth promotion
  • And assist in developing a more personal interaction with your audiences or visitors.

Businesses may benefit from the use of social media platforms such as Instagram, Twitter, Facebook, and others. They have the ability to improve and enhance the relationship with possible clients or prospective consumers. Social media marketing has also become much more manageable in recent years. Facebook postings may be scheduled quite quickly, and there are programs that interact with all of the big social media networks. It is critical to establish a connection between visitors and the company’s social media profiles.

Visitors will be encouraged to follow the company’s social media profiles as a result of this.

This may be accomplished by website owners by including social network icons on their pages.

There are a variety of approaches that may be used to entice people to social media pages.

Using plugins to share social network accounts is the most simple and time-saving method available. There are a variety of free and paid plugins available for including social media icons in the WordPress footer.

Where to Place Social Media Profile Icons

The primary objective is to direct users to the company’s social media pages. As a result, it is critical to remember that these symbols should not be spammy or crowded in their appearance. Before adding icons, take into consideration the present theme and web design. Site owners may either insert icons directly in the footer or utilize the widget area that is included with the theme to display icons on their pages. It is possible to include social networking icons in the widget that appears next to the header of the page.

The steps outlined here will walk you through the process of adding social media icons to your WordPress footer.

How to Add Social Media Icons to The WordPress Footer

In order to avoid using coding or a third-party icon WordPress plugin, first determine whether your theme includes an option to add icons to page sections. If it does not, you will need to use coding or a third-party icon WordPress plugin. If you do not have technical or coding skills, plugins are a good option. All of the well-known platforms are supported by the plugin, which eliminates the need for manual labor. Manual inclusion of less popular social media networks, on the other hand, will be required.

How to Add Social Media Icons to The WordPress Footer Without a Plugin

Adding social media symbols by hand might have its merits in some situations. It is possible to personalize and include less popular social media networks in the article or website parts as well as to remove them. Despite the fact that this involves the use of HTML code, the directions are straightforward. The next part shows how to accomplish this despite the fact that you are a complete novice in coding. Despite the fact that this article is designed for people who do not have CSS or programming abilities, it is simple to follow.

To prevent this, do the following steps: Navigate to the Images section.

To re-use an image, click on the Usage Rights labeled for reuse.

  • Look for and download official social network icons from the Internet
  • Navigate to the WordPress Dashboard area, hover your mouse over “Media,” and then click “Add New.” Open the icon’s picture in the Media Library and copy the direct URL from the image
  • AppearanceWidgets should be selected.
  • Select the widget space where you want to set the social media icons, and then insert a Custom HTML widget into it. Copy and paste the HTML code provided below to create and update a customized HTML document.

A href=”web address such as the address of a Facebook page, Twitter account, or other social media account” border=”0″ /> img border=”0″ /> alt=”alternet text” src=” ” width=”100″ height=”100″/a alt=”alternet text” src=” ” width=”100″ height=”100″/a

  • Copy and paste the HTML code into the picture and use it as a link
  • Widget to be saved
  • Make a new session of the site and check to see whether the icon placement was effective.

If the procedure of entering social media icons into a widget is successful, the process may be repeated as many times as necessary. A sense of accomplishment comes from learning how to add social media symbols to the WordPress footer without the need of a plugin. It’s simple and convenient, and it helps to increase your online visibility on social networking networks.

How to Add Social Media Icons to the WordPress Footer with Social Media Plugins

Website owners who learn how to install and use the WordPress plugins will reap numerous benefits.Plugins can improve page functionality, resulting in increased traffic and conversion rates.Install the plugins, activate them, and they are ready to use.When adding social media icons to a WordPress website, the following add-ons can improve the site’s usability: 1.

Add social media icons to the footer of the website.

Social Icons Widget by WPZOOM

This plugin is fully customisable, and it allows users to search for icons using a keyword search. They may also customize the size and cushioning, as well as select from a variety of various designs and colors.

Social Media Buttons

It provides users with the ability to customize and change the icon colors.

Social Media Icons

It offers a web interface that is straightforward and uncluttered.

How to Install a WordPress Plugin

  • Access the WordPress dashboard using the sidebar menu and click on “Plugins.” By clicking on the “Add New” button located under the “Plugin” section, a page with a list of available plugins will be shown. Scroll through the list or type the name of the plugin into the search box to find it. Select the WordPress plugin that delivers the most useful WordPress functionality. Select the “Install Now” button from the drop-down menu.
  • WordPress will begin the process of downloading the plugin. Upon activation, the “Install Now” button will change to the “Activate” button.

Instructions on How to Add Social Media Icons to the WordPress Footer

  • To install a social media icon plugin, go to the WordPress Plugin Repository and select one from the list. Make changes to the widget to suit your needs and tastes. Customize the hover color, alter the backdrop color, pick an icon font color, adjust the icon size, modify the alignment, and add a title
You might be interested:  Wordpress How To Change Home Page? (Perfect answer)

This makes it simple to match the design of the symbol with the color scheme of the current theme. Users may make icons flat by changing the border radius of the icon to zero and increasing the icon size to around 30 pixels.

  • After enabling the plugin, click on the “Appearance” button to see the changes. Users can browse to the Widget page from inside that portion of the site. Location of the Social Icon Widget: The Social Icon Widget may be found on the Widget page. Hold down the Social Media symbol in the Footer area and drag it to the right. Customize the widget to meet your own requirements and preferences.
  • Save your changes and check them out on the front-end page.

Ending thoughts on how to add social media icons to the WordPress footer

Knowing how to incorporate social media symbols into the WordPress footer provides a sense of accomplishment. It will raise brand recognition as well as the number of followers. There are several benefits to engaging with visitors through social media sites. Visitors to a website can become followers by clicking on social network buttons. They will then be notified of any new postings, goods, or services that are available. Creating a connection between a company’s website and social media platforms is always a good idea.

Followed by an invitation for visitors to pass along social media links to their relatives and friends.

If you enjoyed reading this post on how to add social network symbols to the WordPress footer, you might also be interested in this article on how to remove dates from a WordPress website.

Social Icons Block

The Social Icons block is a collection of icons that represent social media. This feature allows you to include social media icons on any page or post and lead visitors to your social network profiles. Here’s an illustration: The following is a table of contents: Adding the Social Icons block is as simple as selecting it from the Add Block button and pressing Enter. Alternatively, you may start typing/socialing on a new line and hit the enter button. As soon as you add the block for the first time, you will be presented with a Size setting that will assist you in defining the size of your icons: For additional information, please see our full instructions on how to add blocks.

  • To add your first icon, click on the plus sign (+button).
  • You can choose the symbol you want from the list, or you can search for a specific icon, such as “Facebook,” using the search option.
  • You may then attach the emblem to your social media profile, if you choose.
  • Enter the link to your social network profile by typing or pasting it into the text box and clicking the arrow icon.

Adding a link to your social symbol If you do not provide a link to your social icon, you will not be able to see the icon in your preview or on the live website. The following is the table of contents:

Add New Icons

To the right of the current icons, click the + Add Icon button to add a new icon. This will bring up a list of all of the icons that are currently accessible. You may use the search function to find the icon you wish to use. Adding a new icon to the collection. Even if the icon you’re looking for isn’t available, there’s a generic link button that you may use instead: The generic Link icon is seen below. Section I: Table of Contents

List of Supported Icons

There are a variety of icons available for use, including:

  • 500px, Bandcamp, Behance, CodePen, DeviantArt, Dribbble, Dropbox, Etsy, Facebook, Flickr, Foursquare, GitHub, Goodreads, Google, Instagram, Last.fm, LinkedIn, Email (mailto: links), Mastodon, Meetup, and Twitter
  • Among the sites that accept RSS feeds include Medium, Patreon, Pinterest, Pocket, Reddit, RSS Feed (URLs that begin with /feed/), Skype, Snapchat, Soundcloud, Spotify, Telegram, TikTok, Tumblr, Twitch, Twitter, Vimeo, VK, WordPress, Yelp, and YouTube.

Remove an icon

In order to delete an icon, first click on it to bring up the icon’s own toolbar. Remove the social media symbol by clicking on the ellipsis (three-dot) button next to it and selecting Remove Block:Removing a social media icon ↑ Section I: Table of Contents

Block Settings

In addition to the choices available in the block toolbar, each block has its own set of options available in the editor sidebar. For those who don’t see the sidebar, you may access it by clicking on the ‘cog’ symbol to the right of the publish button.

Styles

In the block settings, you have the option of selecting one of three distinct icon styles: arrow, square, and circle. Settings that are not allowed

Layout Justification

You have the option of selecting the justification of the icons from the left, center, right, or space between objects on the screen.

Link Settings

You may also choose to open the links in a new tab by selecting the “Open in a new tab” option from the drop-down menu on the right. When this option is enabled, the links in the social icons will open in a new tab on your browser.

Color Settings

There are two color settings options that you may change under Color Settings.

  • Color of the icons in the Social Icons block may be changed using the icon color property. The background color of all icons may be changed by selecting it and pressing Enter.

Advanced

This page allows you to add a CSS class to your block, which gives you the ability to create custom CSS and design the block anyway you see appropriate. The advanced option allows you to customize your block by adding a CSS class to it. Each social media symbol can also be assigned to a certain class. By picking an icon and editing the Additional CSS Class field for that icon, you may add a class to it as follows: The CSS class field for a single icon is seen below.

How to Add Social Media Icons to Header of Your WordPress Website?

There is no doubt that social media has achieved enormous success all around the world in recent years. As a result, including social media icons on your WordPress site has become increasingly important. In contrast, WordPress does not have sections for social media profiles, although you may add social networking icons to your website. WordPress navigation menus enable you to add social media icons to the top of your WordPress menus. In this essay, we will explore the WordPress navigation menus.

Why You Should Add Social Media Icons To WordPress Menus?

A major advantage of including social network icons in your WordPress menus is that you have the opportunity to connect with a wider audience without exerting any more effort. Moreover, one of the most significant advantages of utilizing social media is the ability to modify the design of icons with a simple drag and drop operation. In contrast, third-party plugins can also show social media icons in your sidebar, however most of the solutions are not as versatile as you would like them to be in this case.

As a result, you can easily show it in the widget-area of your WordPress website, which includes the footer section, sidebars, and other areas as well. Please see the section below for information on how to include social networking icons in WordPress menus.

Adding Social Media Icons To WordPress Menus

In this piece, we’ll go over two fantastic websites that can assist you in adding social network icons to your website’s header. In order to get started, let’s look at our first technique, which is the usage of plugins.

Here’s how you can add social media icon with plugin

You would need to install and activate themenu image plugin as a first step before anything further can be done. For further information, you can refer to the step-by-step tutorial that has been provided.

  • Once the plugin has been installed and active, you will need to go to the WordPress Dashboard to see the results. You will need to go to the appearancemenus page and create a new menu in order to accomplish this.
  • The following step necessitates the creation of unique links for each social media channel that you currently have or wish to include in the new menu
  • Once this is completed, the menu image choice will appear under the menu item. It is possible to add your social networking icon using these choices.
  • This enables you to upload a new icon or primary image icon to be displayed
  • Also, you can decide the size of the social media icon to be displayed on your website. It’s important to remember that social network icons should all have the same size so that the menu area doesn’t get cluttered.
  • Additionally, you will need to choose the location where the icon for your social media channel will be displayed. For example, if you choose the Hide button, the social networking icon will be shown without a label, as seen in the image below. You may also select the above/below option to display the social media icon under the headline in the position that you require
  • Once you have finished configuring your WordPress site, save your modifications and you will see that the social network icons are readily clickable on the screen or on your WordPress website.

It is possible to preview the changes and make any necessary revisions. If you wish to add social media icons to WordPress, you must repeat the procedure and preview the changes again. Do you have any idea? You may also include social network icons in the sidebar of your website. Here’s how to quickly and simply add social network icons to your sidebars using the techniques below:

  • Firstly, log into your WordPress dashboard and select Appearance > Widgets. Navigate to the widgets page and drag the navigation menu widget into the sidebar widget area
  • Or So as you can see, there are several alternatives to pick from in the choose menu. Here, you should select the social menu that you generated in the previous phases. To save your work, click on the “Save” button.

Once you have finished the instructions, you will be able to see the social network icons for your website under the widget areas. For a more appealing appearance, you can customize the CSS stylesheets. That is all there is to it when it comes to adding social media icons to a WordPress blog. Now, we’ll go through our second approach for including a social media symbol in photos that is linked to social networking pages or that does not require the use of a plugin. For this task to be completed, we will need two things: social media symbols and connections to social media profiles on other websites.

  1. For example, we are going to explore adding the Twitter emblem to the WordPress website design.
  2. Furthermore, you may add several symbols to whatever you like, including Instagram, Facebook, LinkedIn, Snapchat, Pinterest, and other social media platforms.
  3. In that case, here is a detailed tutorial on how to integrate social networking symbols into WordPress without the need of a plugin.
  4. To use Fontawesome, go to its official website or choose it from the drop-down menu.
  5. 2.
  6. 3.
  7. Now look for social network symbols that you’d want to alter or include in your photographs.

4.

5.

Click on the Okay button to have this symbol or piece of code hover over the screen.

When you do this, you will notice that the text has been highlighted in blue, and you will be ready to continue on to the next step.

Now, navigate to your WordPress site, and this is where you will enter the code snippet that will allow you to add a social networking symbol to WordPress without the need of a plugin.

10.

On the second layer of appearance, select the menus option and click OK.

To extend the widgets, you would need to select Custom Links Panel from the menu on the left side of the main page (where you will need to enter the URL and text) 12.

In this section, you must paste the code that you copied from the Fontawesome website and then click on the Add to menu button.

After you have saved your modifications, you will be able to view the new menu item on your screen, where the navigation symbols are piled high.

Complete the on-screen information and save the modifications.

Thus, you will be able to view the social networking symbol on your WordPress dashboard. Now we’ll get to the main portion, which will include the addition of social network icons to the top. Here’s how to add social network symbols to your website’s header.

  • From the WordPress dashboard, browse to appearancecustomizeheaderprimary menuand choose the final item on the menu, which is widgets
  • Then click on save changes. As soon as you have picked the widget option for the custom menu, you can begin configuring your widgets by following the steps appearancecustomizewidgetsheader
  • Appearancecustomizewidgetsheader
  • Appearancecustomizewidgetsheader With any plugin, you may select a widget from a list of available options. To include a social widget, you must first install the social media widgets plugin, which can be found on the plugins page.

The following are the procedures to add social media icons to the widget plugin:

  • Look for the social icons widget plugin on the web. When it displays in front of you, click on the Install button
  • Once it has been installed After a few seconds, click on the “Activate Plugin” button to begin using the plugin. Once again, return to the customizer and select widgets, followed by the header. Add the social icons widgets that we have already placed and adjust it to your liking
  • To publish your work, select a link from the list and click on it. Once it is completed, you will be able to get a preview of the modifications on the WordPress website. If you need to make adjustments, simply repeat the process and save your modifications.

If you require more plugins, you can experiment with third-party plugins such as the social icons widget from WPZOOM.

How to open the social media icons in a new tab?

To do this, one needs follow the procedures outlined below:

  • Upon logging into your WordPress dashboard and scrolling up and down, you will see the screen choices in the upper right-hand corner of the window
  • Select the tab option from the drop-down menu and click on it to open it. Check out the pages, articles, custom links, and other choices you’ll find in the boxes portion of the website. Check the link target option from the display advanced menu properties window, on the other hand.
  • The last steps are to return to the menu element and click the widget heading to bring it up on the screen. Examine the link that has been opened in a new tab

When your visitors click on icons, they will be sent to another tab after the process is complete. In conclusion, this was a comprehensive instruction on how to include social media symbols in your WordPress header. Shri updates our audience on the latest WordPress themes, plugins, and other WordPress-related news and information. Additionally, he shares excerpts of WordPress developer interviews from time to time. View all of Shri Posts’s blog posts.

Leave a Comment

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