I have been experimenting with different solutions and unfortunately, I have not been successful in resolving the issue at hand.
While working on a WordPress website, I encountered some challenges. Despite having some knowledge in this area, I am struggling to achieve my desired outcome due to my limited expertise.
Let me explain the situation - I am attempting to add social icons to the footer of a website built on WordPress using a specific theme. Initially, when I added the images, they appeared as expected:
The left column displays the icons perfectly aligned
However, once I began incorporating Anchor Tags (with only one icon featuring the tags), the layout got disrupted:
<div>
<a href="[full link to your Facebook page]">
<img title="Facebook" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453371609_Facebook.png" alt="Facebook" width="35" height="35" />
</a>
<img title="Twitter" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453371295_twitter_social_media_online.png" alt="Twitter" width="35" height="35" />
<img title="YouTube" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453416978_youtube.png" alt="YouTube" width="35" height="35" />
<img title="LinkedIn" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453417011_linkedIN.png" alt="LinkedIn" width="35" height="35" />
<img title="Mail" src="http://fundacionhonrarlavida.eu/wp-content/uploads/2016/01/1453417082_mail.png" alt="Mail" width="35" height="35" />
</div>
The icon that is linked occupies an entire row, pushing the others onto a new line. Upon inspecting the displaced icon, it became evident that the anchor tag was causing the spacing issue despite the image being correctly sized:
It is the Anchor tag consuming all the space
Despite numerous attempts, tweaking the CSS properties for "a img" and "a" by setting display to block or inline-block has yielded consistent results.
In a bid to troubleshoot, I even tried utilizing a plugin dedicated to social icons, but the icons were still appearing vertically stacked.
The CSS snippet pertaining to the "img" element is as follows:
a img, a {
display: inline-block;
border: none;
outline: none;
}
a {
outline: none;
text-decoration: none;
color: #525252;
}
A separate class ".footer a" was created to specify the size of the anchor, but regrettably, it did not solve the problem.
If you could provide guidance on how to rectify this issue, it would be greatly appreciated.