Font awesome icon alignment issue in bootstrap list-group-item - html

Question

I am trying to create a custom checklist box box using bootstrap and font-awesome icons. Here is what I done and the output:
http://jsfiddle.net/9nuhnbbv/110/
<style>
.bigmodal {
height: 90%;
left: 5%;
margin: 0;
width: 90%;
}
.bigmodal.fade.in {
top: 5%;
}
.bigmodal .modal-body {
max-height: none;
}
.bigmodal .modal-content {
width: 100%;
}
</style>
<a data-toggle="modal" href="#HoastedModal" class="btn btn-info">Hoasted Modal</a>
<br>
<br>
<div id="HoastedModal" class="modal fade">
<div class="modal-dialog bigmodal">
<div class="modal-content">
<div class="modal-header">
<h4 id="modal-label">Header</h4>
</div>
<div class="modal-body">
<div class="modal-body" id="poiModalBody">
<div class="row" id="tree-container">
<div class="col-md-4">
<fieldset>
<legend>Groups</legend>
<div class="list-group poi-list">
<div id="groups-container">
<a class="list-group-item" data-id="37" href="#" style="display: block;"> <span>ACCOMMODATION, EATING AND DRINKING</span> </a>
<a class="list-group-item" data-id="38" href="#" style="display: block;"> <span>COMMERCIAL SERVICES</span> </a>
<a class="list-group-item" data-id="39" href="#" style="display: block;"> <span>ATTRACTIONS</span> </a>
<a class="list-group-item" data-id="40" href="#" style="display: block;"> <span>SPORT AND ENTERTAINMENT</span> </a>
<a class="list-group-item" data-id="41" href="#" style="display: block;"> <span>EDUCATION AND HEALTH</span> </a>
<a class="list-group-item" data-id="42" href="#" style="display: block;"> <span>PUBLIC INFRASTRUCTURE</span> </a>
<a class="list-group-item" data-id="43" href="#" style="display: block;"> <span>MANUFACTURING AND PRODUCTION</span> </a>
<a class="list-group-item" data-id="44" href="#" style="display: block;"> <span>RETAIL</span> </a>
<a class="list-group-item" data-id="45" href="#" style="display: block;"> <span>TRANSPORT</span> </a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<legend>Categories</legend>
<div class="list-group poi-list">
<div id="categories-container">
<a class="list-group-item poi-category" href="#" style="display: block;"> <span>AIR</span> <i data-id="255" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
<a class="list-group-item poi-category" href="#" style="display: block;">
<span>ROAD AND RAIL</span> <i data-id="256" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
<a class="list-group-item poi-category" href="#" style="display: block;">
<span>WALKING</span> <i data-id="257" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
<a class="list-group-item poi-category" href="#" style="display: block;">
<span>WATER</span> <i data-id="258" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
<a class="list-group-item poi-category" href="#" style="display: block;">
<span>PUBLIC TRANSPORT, STATIONS AND INFRASTRUCTURE</span> <i data-id="259" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
<a class="list-group-item poi-category"
href="#" style="display: block;"> <span>BUS TRANSPORT</span> <i data-id="260" class="fa fa-square-o fa-2x pull-right category-selectall"></i> </a>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">
<fieldset>
<legend>Classes</legend>
<div class="list-group poi-list">
<div id="classes-container">
<i class="fa fa-hand-o-left"></i> Please select a cateogy.
</div>
</div>
</fieldset>
</div>
<div class="clearfix"></div>
</div>
<hr>
<div class="row" id="calculation-section">
<div class="pull-left" id="poi-calculate-quote-container">
<button type="button" id="poi-calculate-price-button" class="btn btn-primary">Calculate Price</button>
<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top" id="poi-reset-button" class="btn btn-primary">
Reset Selection
</button>
<button type="button" id="poi-addto-basket-button" class="btn btn-success hide">Add To Basket</button>
</div>
<div class="pull-right">
<button id="poi-tree-close-dialogue-button" class="btn">Close</button>
</div>
</div>
<hr>
<div id="quote-section">
<div style="display: none" id="poi-quote-progressbar" class="progress progress-striped active">
<div style="width: 100%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-primary">
<span class="sr-only">Please wait</span>
</div>
</div>
<div id="poi-quote-result">
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
<!--modal-content-->
</div>
<!--modal-dialog-->
</div>
<!--modal-->
It work's fine in most of the resolutions but in some resolutions it has alignment issue as it shown in the below image:
This screenshot has taken from a screen with 1613px.
But if I make the screen slightly smaller or bigger the alignment issue gets fixed:

Answer 1

Since your 'checkboxes' don't scale, you could add more padding to the list items and let the icons sit in the padding so that the text to the left doesn't interfere at any breakpoint:
.list-group-item {
padding-right: 40px;
}
.list-group-item i {
position: absolute;
right: 15px;
}