Using iCheck: checkbox and label on different lines (want them inline)

I am using the jquery plugin iCheck to style my checkboxes. I have successfully done this, but now I am not able to get the checkbox and label on the same line.

Here is the main code:

<ul class="facebook-friends">

        @foreach ($friends as $friend)

        <li>
        <div class="facebook_friend">
        <input tabindex="1" type="checkbox" name="friend" id="{{$friend}}" value="{{$friend}}">
        <label for="{{$friend}}" style="display:block;">
        <span class="icon"><a href="http://www.facebook.com/{{ $friend }}"><img src="https://graph.facebook.com/{{ $friend }}/picture" alt="" height="40" width="40"></a></span>
        </label>
        </div>
        </li>

        @endforeach                     
</ul>

CSS:

.facebook_friend {
    width:150px;
}

.icon {
    width:45px;
}

ul.facebook-friends {
    margin:0;
    padding:0;
    border:0;
    overflow:hidden;
    *zoom:1;
    width:500px;
    font-family:'proxima-nova';
    font-size:12px;


    color:#999

}

ul.facebook-friends li {

    list-style-image:none;
    list-style-type:none;
    margin-left:0;
    white-space:normal;
    display:inline;
    float:left;
    padding-left:0px;

    margin: 5px;

}

The iCheck box renders like so:

<div class="icheckbox_square-blue" style="position: relative;">
<input tabindex="1" type="checkbox" name="friend" id="3607" value="3607" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
</div>

The image that I am using for the label for the checkbox appears on the line under the check boxes. Do you see anything that would make this be the case? I would like them in line. I am using Laravel 4.

Just move you input/checkbox inside the label, like

<ul>
    @foreach ($friends as $friend)
        <li>
            <div class="facebook_friend">
                <label for="{{$friend}}" style="display:block;">
                    <input tabindex="1" type="checkbox" name="friend" id="{{$friend}}" value="{{$friend}}">
                        <span class="icon">
                            <a href="http://www.facebook.com/{{ $friend }}">
                                <img src="https://graph.facebook.com/{{ $friend }}/picture" alt="" height="40" width="40">
                            </a>
                        </span>
                </label>
            </div>
        </li>
    @endforeach
</ul>

DEMO HERE.