Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

Whats the correct way of placing an icon next to text?

Hi guys,

What is the correct code to use when placing an icon next to a piece of text?

For example: a telephone icon next to a phone number.

I have tried various ways but the text and icon are never horizontally aligned.

4 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Shaun,

I use font awesome icons with a span tag and always add the class fa-lg. This seems to do the trick for me with vertical alignment :)

Craig

Shaun Kelly
Shaun Kelly
35,560 Points

Will this work if my site is not live yet?

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

You can find Font Awesome here, and it tells you how to use them. Basically, you can download it and add it yourself to your page, or you can use their CDN. In either case, it's then just a matter of using their markup with <i> tags. :)

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

I have installed it using the CDN but it doesn't seem to be working. Is it because my site is not live yet?

Thanks

Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

That might be why, although if you are developing locally using MAMP, etc. it should work as long as your computer has internet access. You could try putting a sample version live and seeing if it works then.

Craig Watson
Craig Watson
27,930 Points

Hi Shaun,

Firstly I now realize hoe brief my original answer was, so for that please accept my apologies.

Would you like to post the code you are using to have the CDN work on your site :) / Are you making a WordPress site or static HTML ?

I can promise you once this is up and running you wont look back :)

Craig

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

No worries,

It is a static HTML site. I have tried a live version and still doesn't work. There is an empty square where the icon is supposed to be displayed.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <title>Shaun Kelly</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

<body>
<article>
<i class="fa-phone">07989 936719</i>
</article>
</body>
Craig Watson
Craig Watson
27,930 Points

Ok I have this link in my site maybe try this :)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

OR

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Fingers Crossed

Shaun Kelly
Shaun Kelly
35,560 Points

Still not working :(

Craig Watson
Craig Watson
27,930 Points

I spotted it :)

<article>
    <p><i class="fa fa-lg fa-phone"></i>07989 936719</p>
</article>
Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

Okay thanks! So the text doesn't go inbetween the <i> tag? I will try again when I'm back home.

Thanks for your help

Craig Watson
Craig Watson
27,930 Points

Correct Shaun, that i tag or as i use a span tag is used to generate a ::before pseudo element which is your icons content unicode value.

So for example if you wanted a search button with a magnifying glass it would look like this:

<!-- Icon After Text -->
<button type="button" class="btn">Search<span class="fa fa-lg fa-search"></span></button>

<!-- Icon Before Text -->
<button type="button" class="btn"><span class="fa fa-lg fa-search"></span>Search</button>

Some people add a space on the side of the text that the icon is on to space them out but I do it through margin most of the time.

button>span.fa {
    /*Just Examples you need to take into account what side of the text you are going to be putting your icons most of the time for this to be beneficial*/
    margin-left:  6px;
    margin-right: 6px:
}

Craig