[resolved] Icons in Side Widget will not Display Horizontally (8 posts)

  1. SandyMcDonald
    Posted 2 years ago #

    I would like to use social media icons directly in the text/html area of the side widget. I've successfully displayed them; however, they are by default displaying vertically. The code in the text of the side widget is

    <div id="social-icons">
    <a href="https://www.facebook.com/misscupcakeable">
    <img src="http://cupcakeable.com/wp-content/uploads/2013/02/roundTealFacebook.png"
     title="Join My Facebook Page" alt="Join My Facebook Page" /></a>
    <a href="http://www.twitter.com/misscupcakeable"><img
     title="Follow Me on Twitter" alt="Follow Me on Twitter" /></a>
    <a href="http://www.pinterest.com/misscupcakeable"><img
     title="Follow Me on Pinterest" alt="Follow Me on Pinterest" /></a>
    <a href="http://www.flickr.com/photos/cupcakeable/"><img
     title="Follow Me on Flickr" alt="Follow Me on Flickr" /></a>

    The code added to the custom css file via Jetpack is

    .`custom #social-icons a img {
    float: left;

    Why is this not working? The site is Cupcakeable

    Thank you.

  2. Michael
    Part-Time Forum Moderator
    Posted 2 years ago #

    there is no sign of these new styles in your site;

    double check if the 'jetpack' css option is properly activated.

    your theme also seems to have ist own custom css (?) - please contact the theme's developer for support.

  3. SandyMcDonald
    Posted 2 years ago #

    I'm sorry. I had removed the code. I've put it back now. Can you see if you can see any signs of the new styles in the site now?

    InkThemes used to have a forum for all users. They have sense created a new forum, which is only available for users of the paid version. Should I try to find an email for InkThemes?

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Where is the class "custom"? It seems to be unnecessary anyway - this works in Firebug:

    #social-icons a img {
    float: left;
  5. SandyMcDonald
    Posted 2 years ago #

    I got the solution from an article. It had the instructions to place the code with the custom class in the css file and the other code in the text of the side widget.

    I tried it with the code above. It works but created a problem. The title of the next text box in the side widget appears on the same line as the icons.

    example can be seen here.

    1- How would I put the space back between the icons and the next text box?

    2- Also, how would I add spacing in between the individual images/icons?

    I appreciate your help. I'm new at this. I'm not familiar with Firebug yet.

  6. SandyMcDonald
    Posted 2 years ago #

    I figured out how to put spacing between the icons by adding this code to the custom css.

    #social-icons a img {
    	float: left;
    	padding-right: 5px;

    To correct the other problem of the title of the next text box in the widget appearing on the same line as the icons, I added the following code to the end of the html code.


    Is this the best practice?

  7. paulwpxp
    Font hero
    Posted 2 years ago #

    It's okay to use <br><br> , but better not to.

    Try this.

    #social-icons {
    	text-align: center;
    #social-icons > a {
    	display: inline-block;
    #social-icons > a img {
    	padding: 5px;

    Without floating, there is no need to clear float. Adjust padding as appropriate, in addition to that you can also use first-child or last-child to remove the left right padding too.

  8. SandyMcDonald
    Posted 2 years ago #

    That worked beautifully. Thank you very much for helping.

Topic Closed

This topic has been closed to new replies.

About this Topic