CODEWITHSUNDEEP
htmlcsszurb-foundation
nCore
nCore

Reputation: 2087

font-awsome icon and p tag

So I've been trying to align an address with font-icon in the left-side of the address. I'm using foundation zurb framework as well.

<i class="fa fa-location-arrow fa-1x"></i><p>
        58 High Street <br />
        Harpenden Herts <br />
        AL5 2SB</p>

I did it this way but I'm wondering if there is any other way of doing it.

<span style="">58 High Street</span> <br />
        <span style="padding-left:18px;">Harpenden Herts</span><br />
        <spane style="padding-left:18px;">AL5 2SB</span>
        <br /><br />

http://jsfiddle.net/gpL42zbm/ I used image holder to illustrate the icon.

Upvotes: 0

Views: 1655

Answers (1)

jmbertucci
jmbertucci

Reputation: 8234

In HTML, there's always "another way" of doing things. :)

First, you're talking about an address, so I would recommend considering using Microformats hCard/vCard to mark up your content. There's also the HTML5 address tag to consider, but here are two resources.

Start by marking up the address info into Microformats.

<div id="" class="vcard">
  <b class="fn n"></b>
  <div class="adr">
    <b class="street-address">58 High Street</b>
    <b class="locality">Harpenden Herts</b>
    <b class="postal-code">AL5 2SB</b>
  </div>
</div>

If you have an persons name, added to the <b class="fn n"></b> element. If it's an organization name, add org to the class name.

Side note, in HTML5 I'm more of a fan of using the <b> tag for semantically meaningless markup, instead of <span> because it's simply 6 less characters and I feel it helps to be slightly more readable. The only catch is you have to remember to remove the standard browser format of bold font-weight

With the markup above, you have plenty of hooks and micro-semantic meaning to tie your CSS into for formatting. An example might be

.vcard b { font-weight:normal; }
.vcard > .adr > .street-address, 
.vcard > .adr > .locality { display:block; }

Now, you just need to add your font-awesome icon into the mix.

<div id="" class="vcard">
  <b class="icon fa fa-location-arrow fa-1x"></b>
  <b class="fn n"></b>
  <div class="adr">
    <b class="street-address">58 High Street</b>
    <b class="locality">Harpenden Herts</b>
    <b class="postal-code">AL5 2SB</b>
  </div>
</div>

Now, you just need to position it. There are multiple options here too. Two common options are floating the element or absolutely positioning it. I'm going to just absolutely position it to make aligning the address text cleaner.

.vcard { position:relative; padding-left:35px; }
.vcard > .icon { position:absolute; top:0; left:0; }

What the above CSS is doing is it's applying the position:relative style to the containing element to allow child elements to be easily positioned within itself.

I then position the icon absolutely in the upper left corner of the .vcard. Since the example fiddle used a 30x30px icon, I then add a 35px padding to the left side to push the address content over and give the icon space and avoid that overlap, while giving it a small gutter.

Here's an updated Fiddle example with the above code.

http://jsfiddle.net/gpL42zbm/2/

If you're looking to put the icon on the same line as the street number, you can use float, instead of absolutely positioning the icon.

Here's an updated example for using float: http://jsfiddle.net/gpL42zbm/3/

The changes here are just CSS:

.vcard > .adr > .street-address{ display:block; line-height:2.25; }
.vcard > .icon { float:left; margin-right:0.25em; }

First, I float the icon left and give it a little bit of a right margin to separate the text and icon for readability.

Then I adjust the street-address less to give it more line-height (you could also just use padding) so make the line approximately the same height as the icon, allowing the lower lines to wrap under the icon.

There are, of course, other ways to skin the cat, but here are a couple options that I hope helps get you where you're going!

Cheers!

John

Upvotes: 1

Related Questions