How to Add Social Media Icons to Your WordPress Site Without Using Plugins

Social media icons help connect your audience to your accounts on various platforms like Facebook, Twitter, and Instagram, which enhances your digital presence and makes it easier for your site visitors to follow and interact with you. In this guide, we will learn how to add these icons to a WordPress site manually, without needing to use external plugins. We will explain the steps in detail to suit beginners, including necessary practical examples.

Step One: Obtaining the Icons

You can use freely available icons on the internet or design your own. There are many websites that offer icon packs such as:

• Font Awesome: A huge library of free icons.
• Flaticon: A massive collection of icons in various formats.

In this example, we will use icons in SVG or PNG format to ensure more flexibility in controlling size and colors.

Step Two: Uploading Icons to Your Site’s Server

1. Download the icons you wish to use (for example: Facebook, Twitter, and Instagram icons).
2. Using FTP or the file manager in your hosting control panel (cPanel or other), upload the icon files to a folder within your site, such as: wp-content/uploads/social-icons.
3. Keep the file paths to use them later in the HTML code.

Step Three: Adding HTML Code to Display the Icons

You can display the icons anywhere suitable on your site: in the Sidebar, Footer, or even on the homepage. Here is an example showing how to add them manually:

 <!-- Place this code in any template file or text widget in WordPress --> <div class="social-icons-container"> <a href="https://facebook.com/your_username" target="_blank"> <img src="https://example.com/wp-content/uploads/social-icons/facebook.png" alt="Facebook Icon" /> </a> <a href="https://twitter.com/your_username" target="_blank"> <img src="https://example.com/wp-content/uploads/social-icons/twitter.png" alt="Twitter Icon" /> </a> <a href="https://instagram.com/your_username" target="_blank"> <img src="https://example.com/wp-content/uploads/social-icons/instagram.png" alt="Instagram Icon" /> </a> </div> 

Notes:

• Replace https://example.com/wp-content/uploads/social-icons/facebook.png with the actual path to the icon you uploaded.
• Modify the social media account links according to your actual accounts.
• Place this code in the appropriate location: for example, in the header.php file or via a Text widget in Appearance > Widgets.

Step Four: Styling the Icons via CSS

It’s likely that the icons will appear in random sizes and positions. This is where CSS comes in to style them. You can add the code to the style.css file of your Child Theme or in the Additional CSS field from the control panel (Appearance > Customize). Example:

 .social-icons-container { display: flex; /* To make icons align horizontally */ gap: 10px; /* Space between icons */ justify-content: center; /* To center them horizontally */ margin: 20px 0; }
.social-icons-container a {
display: inline-block;
}

.social-icons-container img {
width: 32px; /* Icon size /
height: auto; / Maintain aspect ratio */
transition: transform 0.2s;
}

.social-icons-container img:hover {
transform: scale(1.1); /* Zoom effect on hover */
}

In this example:

• display: flex; to make the parent element accommodate the icons horizontally.
• gap: 10px; to add spacing between the icons.
• transition: transform 0.2s; provides a smooth animation effect on hover.

Step Five: Using SVG Instead of PNG (Optional)

If you have icons in SVG format, you can embed them directly into the HTML code to benefit from the ability to change color and scale without losing quality. Example:

 <a href="https://facebook.com/your_username" target="_blank"> <svg width="32" height="32" viewBox="0 0 512 512"> <!-- Place the SVG code for the Facebook icon here --> </svg> </a> 

But remember that the size of SVG code can be large, so use it wisely to ensure page load speed.

Step Six: Adding Icons via the Text Widget

If you prefer to add icons to the sidebar or footer, you can use the Text widget in WordPress:

1. From the dashboard, go to Appearance > Widgets.
2. Look for the Text widget and drag it to the location where you want the icons to appear (like the sidebar).
3. Paste the HTML code containing the icon links into the Text widget.
4. Click Save and preview the changes on your site.

Additional Tips

• Using Font Awesome: You can include icon fonts from Font Awesome by modifying the functions.php file or linking directly in header.php, but this might be considered “semi-plugin.”
• Icon Size: Be careful to use appropriate sizes so as not to negatively affect site loading speed.
• Responsiveness (Small Screens): Make sure to test the appearance on mobile devices to ensure the icons display properly.
• External Link Security: When using target="_blank", you can add rel="noopener noreferrer" for security purposes and to prevent some vulnerabilities.

Why do you need a professional website with ITQAN?

Social media icons are a small part of the user experience on your site. If you are looking to develop a comprehensive, responsive, and attractively designed WordPress site, the Itqan team offers you the optimal solutions. Our experts have years of experience in designing and developing Arabic websites using the latest technologies.
By choosing Itqan, you will get:

• Masterful design that expresses your identity: We always strive to create an interface that harmonizes with your brand.
• High performance: We ensure fast loading speeds and a smooth user experience on all site pages.
• Periodic updates and technical support: We continuously monitor your site and provide consultations and support for everything you need.

Contact Us Now!

Whether you want to add social media icons or design a new site from scratch, Itqan is ready to help you achieve your digital goals. Click the link below to get started:
Contact ITQAN

Make your site reflect your professionalism and attract more followers through social media channels. Start now!