Awesome Font Icon pushing one coln text down compared with other coln text... HALP!

I added an Font Awesome Icon to one of the text colns in a table,

however it is pushing that line of text out of level compared with other text colns, (the neighbouring columns, to the left and right are all higher compared to the address coln.

Does anything know how to fix it?

Attempted soln so far: I have tried to put the awesome font icon in a separate coln however this did not resolve the issue.

 

adjusting the awesome font icon's size also did not solve the issue.

 

Did you try

vertical-align: middle;

or

vertical-align: top;

?

If that doesn't help, you can always try a negative margin: margin-top: -0.6em;

 

line-height?
margin?
specific styling on the i-element which you've used to wrap the font-awesome icon with (which is default, you might have used a different element, of course).
Why are you showing us a picture only? Show us the CODE, man.

 

echo '
<div class="container">  
    <div class="row row-centered">
<h1>Properties List</h1>
</div>


';
//============
echo '
<form id="demo-form" action="" method="post" accept-charset="utf-8" class="uk-form bt-flabels js-flabels" data-parsley-validate data-parsley-errors-messages-disabled>
<div class="uk-text-center uk-margin-top">
<button name="submit" type="submit" class="regbtn"> Add Property </button>
<button name="cancel" type="submit" class="regbtn"> Back </button>        
    </div>
    </form>
  
  
<div class="row">
                        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <form class="form-horizontal" name="search" role="form" method="POST" onkeypress="return event.keyCode != 13;">
                                    <div class="input-group col-sm-11">
                                        <input id="name" name="name" type="text" class="form-control" placeholder="Search properties list" autocomplete="off"/>
                                        <span class="input-group-btn">
                                            <button type="button" class="btn btn-default btnSearch">
                                                <span class="glyphicon glyphicon-search"> </span>
                                            </button> </span>
                                    </div>
                                </form>
                        </div>

                    </div>

                    <div class="table-responsive content-panel tablesearch">
';
$pmID =$row['pmID'];
$sql = "select * from property where pmID='$pmID' AND inactive='No' ORDER BY propertyName";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
echo'
                                    <table id="resultTable" class="table table-striped">
                                        <thead>
                                            <tr class="small">                                              
                                                <th>Property Reference</th>
                                                <th>Type</th>
                                                <th>Address</th>
                                                <th>Rent</th>
                                                <th>Commission (%)</th>
                                                <th>Owner</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                    <tbody>';

// output data of each row
    $secret = 'ddddddd';

    while($rr = $result->fetch_assoc()) {
        $id = $rr["propertyID"];
        $hash = hash_hmac('bbbbbbb', $id, $secret);
        $ownerhash = hash_hmac('bbbbbbb', $rr["ownerID"], $secret);
      
        $address=$rr["streetNumber"]." ".$rr["streetName"].", ".$rr["suburb"].", ".$rr["countryState"]." ".$rr["postcode"];
        echo "<tr class=\"small\"><td>".$rr["propertyName"]."</td><td>".$rr["propertyType"]."</td><td><span style='font-size: 24px; line-height: 1.5em;'><i class='fa fa-map-marker' style='vertical-align: middle;' aria-hidden='true'></i></span> ";      
        if ($rr["roomNumber"] !=NULL){
echo "Room ".$rr["roomNumber"].", ";
}
if ($rr["unit"] !=NULL){
echo $rr["unit"]."/";
}
echo $rr["streetNumber"]." ".$rr["streetName"].", ".$rr["suburb"].", ".$rr["countryState"]." ".$rr["postcode"]."</td><td>";

PHP:

 

I think the issue isn't with the awesome font icon aligning but with the address text. it's aligned to the bottom for that column.

how can i make it align to the middle?

how do i get inside the echo?

in the css i tried to add in

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td{
vertical-align: middle!important;
}

still doesn't work.

 

You made it's line-height bigger than the line-heights inside the other TD... specifically by setting it to 1.5em when you JUST set the font-size to 24px, it's resolving to 36px. OF COURSE you're having alignment issues. One of the whole reasons to use font-awesome or other such vector graphic alternatives is to STOP declaring things in pixels -- that's kind of the point!

Little "trick" -- set it to something like say font-size:1.5em; with a line-height of 1.2em, then set a top and bottom margin of NEGATIVE 0.5em; Negative margins shrink the size of the element in flow, reducing how other elements react to its height. It's sneaky, but it works -- oh, and set it to inline-block or some browsers will ignore those height calculations.

Though really, damn that markup AND that CSS... but I see the telltales of bootcrap so I guess that level of developer ineptitude is par for the course -- with the endless pointless DIV for nothing, endless pointless SPAN for nothing, endless pointless classes for nothing, static style in the markup, etc, etc... around half that HTML belongs in the trash bin.

BUT on the flip side of the coin, it's DAMNED refreshing to see somebody using THEAD, TBODY, and TH properly -- if at all -- for a change. Though some SCOPE attributes would be nice!

 

sorry for being rude i forgot to post back here for closure.

i'm happy to say i have resolved the issue.

i removed the in line style

that is removed:

<span style='font-size: 24px; line-height: 1.5em;'>

instead i added a new size to font-awesome.css and mini

(you know how you have 1x 2x 3x etc and lg i made my own.)

.fa-lp {
font-size: 2em;
line-height:0.75em;
vertical-align: top;

everything is fine now

see attached.