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>