Social Media Icons
-
Hello! I want to put social media icons under text, but above a contact form on http://reasonstobejoyful.com/contact/. However, all of the social media icons are piled on top of one another. I have tried editing the code but nothing will work. When I save the code below, it shows up normal in the editor, but not on the site. Anyone have any suggestions to fix this? Thank you in advance! Here is the code that is currently on the page:
Do you have some joy or resources to share? Just want to say hi? Drop me a line via social media, or fill out the contact form below. I look forward to hearing from you! :)
<img class=”alignleft size-full wp-image-89″ src=”http://reasonstobejoyful.files.wordpress.com/2014/08/twitter2.png” alt=”Twitter” width=”48″ height=”48″ /><img class=”alignleft size-full wp-image-90″ src=”http://reasonstobejoyful.files.wordpress.com/2014/08/facebook2.png” alt=”Facebook” width=”48″ height=”48″ /><img class=”alignleft size-full wp-image-91″ src=”http://reasonstobejoyful.files.wordpress.com/2014/08/instagram.png” alt=”Instagram” width=”48″ height=”48″ /><img class=”alignleft size-full wp-image-92″ src=”http://reasonstobejoyful.files.wordpress.com/2014/08/pinterest2.png” alt=”Pinterest” width=”48″ height=”48″ /><img class=”alignleft size-full wp-image-93″ src=”http://reasonstobejoyful.files.wordpress.com/2014/08/email2.png” alt=”Email” width=”48″ height=”48″ />
[contact-form][contact-field label='Name' type='name' required='1'/][contact-field label='Email' type='email' required='1'/][contact-field label='Website' type='url'/][contact-field label='Comment' type='textarea' required='1'/][/contact-form]
The blog I need help with is: (visible only to logged in users)
-
That’s very strange. I copied your same code, and it worked fine on my test page:
http://snag.gy/MmTjP.jpgHere’s the code I used:
http://snag.gy/6JIRg.jpgIf you could take a screenshot of what you see in your text editor perhaps we can figure out what’s going on together.
-
Thanks for helping me out! I have linked some screen shots for you to review. Let me know if you have any ideas, and again, thank you!
Visual View – http://snag.gy/s66pw.jpg
Text View – http://snag.gy/bVsXs.jpg -
So the good news is you aren’t doing anything wrong. The bad news is the problem seems to be related to your theme. The code renders fine in other themes but as soon as I switched the theme on my test blog to 2013 I ended up with the same problem you had. I’ll tag this thread for staff assistance to see if they have any other ideas.
-
Thanks for tagging this and your help. Hopefully they will have some other ideas. Have a great day!
-
Hi @tierneyp18,
It looks like the social media icons on your page here are currently lined up correctly:
http://reasonstobejoyful.com/contact/
Can you let me know if you need anything else?
-
-
Ah got it! If you would like to put them side by side within the page, the easiest method would likely be to use a table format. For example, give the following code a try:
<table><tr><td><a href="https://www.facebook.com/reasonstobejoyful" target="_blank"><img class="size-thumbnail wp-image-139 alignleft" src="http://reasonstobejoyful.files.wordpress.com/2014/08/social_media_icons_elance_2-01.png?w=45" alt="social_media_icons_elance_2-01" width="45" height="45" /></a></td> <td><a href="https://twitter.com/tierney_peters" target="_blank"><img class="alignleft size-thumbnail wp-image-141" src="http://reasonstobejoyful.files.wordpress.com/2014/08/social_media_icons_elance_2-05.png?w=45" alt="social_media_icons_elance_2-05" width="45" height="45" /></a> </td> <td><a href="http://instagram.com/peterst2" target="_blank"><img class="alignleft size-thumbnail wp-image-142" src="http://reasonstobejoyful.files.wordpress.com/2014/08/social_media_icons_elance_2-10.png?w=45" alt="social_media_icons_elance_2-10" width="45" height="45" /></a> </td> <td><a href="http://www.pinterest.com/tierneypeters9/" target="_blank"><img class="alignleft size-thumbnail wp-image-140" src="http://reasonstobejoyful.files.wordpress.com/2014/08/social_media_icons_elance_2-02.png?w=45" alt="social_media_icons_elance_2-02" width="45" height="45" /></a></td></tr></table>If you copy that text and place it within the Text Editor, the icons should sit side by side.
- The topic ‘Social Media Icons’ is closed to new replies.
WordPress.com Forums 
