Horizontal Icons in Text Widget

How would I get these four icons to appear horizontally in a text widget, rather than vertically as they appear now?

<span class="icon-logout"></span>
<span class="icon-alerts"></span>
<span class="icon-share"></span>
<span class="icon-media"></span>

  • Justin
    • The Incredible Code Injector

    Here's what I did:

    <div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center; padding-top: 25px;"><a href="https://www.facebook.com/EdgarsRestaurant"><img src="http://www.edgarsrestaurant.com/images/social/Facebook.png" alt="Like Us on Facebook" /></a> <a href="http://twitter.com/EdgarsAkron"><img src="http://www.edgarsrestaurant.com/images/social/Twitter.png" alt="Follow Edgar's on Twitter" /></a> <a href="http://www.youtube.com/user/edgarsrestaurant"><img src="http://www.edgarsrestaurant.com/images/social/YouTube.png" alt="Friend Edgar's Restaurant on Facebook" /></a>
    Ph# 330-869-3000
    </div>

    You can see it on the top right of this page: http://www.edgarsrestaurant.com

    (post modified for cleaner code output)

  • buddha
    • Syntax Hero

    Thanks, I gave yours a try with a copy/paste but it didn't work for me. Trying to make this work below, but still no luck:

    <div style="float:left; margin-left: 0px; position: relative; width: 100%;">
    <span class="icon-chill"></span><span class="icon-country"></span><span class="icon-house"></span><span class="icon-indie"></span>
    <span class="icon-latin"></span>
    <span class="icon-meditate"></span>
    </div>

  • Brian Purkiss
    • Smushie Pies

    There are a many number of ways of accomplishing this. It all depends on how you have your CSS setup.

    Spans are inherently display: inline, meaning, they sit next to each other.

    If you have set them to display: block, then they would stack.

    If they're set to display: block, then you'll need to float them left in order to get them to stack next to each other.

  • buddha
    • Syntax Hero

    what is the wrong with the float left setup below?

    <div style="float:left; margin-left: 0px; position: relative; width: 100%;">
    <span class="icon-chill"></span><span class="icon-country"></span><span class="icon-house"></span><span class="icon-indie"></span>
    <span class="icon-latin"></span>
    <span class="icon-meditate"></span>
    </div>

  • buddha
    • Syntax Hero

    this feels like i am in a plane that i need to land, the pilot is unconscious, and air traffic control is talking me through it by telling me that i need to land the plane.

    this does not work:

    .container-div span {
    <span class="icon-chill">
    <span class="icon-country">
    <span class="icon-house">
    <span class="icon-indie">
    <span class="icon-latin">
    <span class="icon-meditate">
    }

  • Brian Purkiss
    • Smushie Pies

    No. That doesn't work. That isn't what I was telling you to do.

    I apologize. I have been speaking under the assumption that you knew some basic CSS or HTML.

    You need to place the CSS in your CSS file and assign a class to the containing div.

    .container-div span { (the CSS here) }

    Where "container-div" is the class you have assigned to the div and "(the CSS here)" are the CSS rules you're using to achieve the desired output.

    The CSS rules depend on what you already have in place. So that isn't something I can provide.

  • buddha
    • Syntax Hero

    ok, any ideas on placing widget shortcode below in a buddypress default footer (this would solve my problem another way):

    <?php
    echo do_shortcode( ' [otw_is sidebar=otw-sidebar-2] ' );
    ?>

    ---------------------------------

    <div id="footer">
    <?php if ( is_active_sidebar( 'first-footer-widget-area' ) || is_active_sidebar( 'second-footer-widget-area' ) || is_active_sidebar( 'third-footer-widget-area' ) || is_active_sidebar( 'fourth-footer-widget-area' ) ) : ?>
    <div id="footer-widgets">

  • Justin
    • The Incredible Code Injector

    Brian, why don't you just provide the css code so he can add it to his stylesheet and the html code so he can add it to the widget?

    I would think there would be less time spent spinning around in circles as he has been. I don't think clues are what he's after.

  • Justin
    • The Incredible Code Injector

    You could add this to your widget:

    <div id="yourcssclass-foryourimages">
    <img src="image1" />
    <img src="image1" />
    <img src="imageN" />
    </div>

    Add this to your CSS:

    #yourcssclass-foryourimages { white-space: nowrap; }
    #yourcssclass-foryourimages img {
    display: block;
    float: left;
    margin: 20px;
    }

    yourcssclass-foryourimages <- That's simply what you want to call the css class for the div you're creating. Then adjust the margin or float left or right and padding as needed however you want.

    For span you could add the following to the img class.
    display: block and margin: 0 auto;

    FYI, I'm not an expert in CSS so hopefully this will assist.

    Here's another link that will help you to understand the mechanics of it: http://web-design-lessons.com/articles/article/1/36

  • Brian Purkiss
    • Smushie Pies

    Justin,

    I can't provide a blanket "this CSS will accomplish what you're wanting" as the CSS I write depends on the CSS he already has in place.

    Also, that falls in the realm of custom development, which is beyond the realm of support we offer here. Technically, any CSS direction or writing falls outside the realm of support we offer here, yet I'm trying to help him. And rather than provide him a copy and paste solution, I'm trying to give him some direction so he can learn/teach himself how to do this for the future.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.