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

General Discussion

Joseph Torres
Joseph Torres
6,282 Points
Posted by Joseph Torres
Joseph Torres
6,282 Points

How to justify a font awesome icon to the right of text on the same line

How to justify a font awesome icon to the right of text on the same line? I have tried nesting i tag with in span, a tag, even display: inline and nothing works. Any ideas??

2 Answers

deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

Assuming you are using fontAwesome with CSS and not SVGs you can use pseudo elements like so

 /*to the left*/
h2:before{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";
}

 /*to the right*/
h2:after{
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    content: "\f007";
}
Joseph Torres
Joseph Torres
6,282 Points
Joseph Torres
Joseph Torres
6,282 Points

Hell thank you so much for getting back to me. I actually kind of changed things around a bit and decided that I would like to make a column with a font awesome icon on the left and text on the right but several of these vertical aligned. So if you look at this site, the first image has check boxes on the left and text on the right. I tried doing this but its centered vertically but indented because its just centered and that's all. I've tried flexbox to do this exact things but its just not working.. Any thought??

https://www.landingfolio.com/pricing/growsumo-2/

deebird
deebird
7,558 Points
deebird
deebird
7,558 Points

To do a check list you should use an ul and replace the default bullet of the li with your icon, see the basic idea below. You will need to get the unicode for the icon you want to use.

ul { 
padding-left:20px;
 list-style:none;
 }

li:before {    
font-family: "Font Awesome 5 Free"; 
font-weight: 900; 
content: "\f007";
margin:0 5px 0 -15px;
}
Joseph Torres
Joseph Torres
6,282 Points
Joseph Torres
Joseph Torres
6,282 Points

Hello Andrea, sorry for late response however I may not be doing it correct or its just not working for some reason. So is it like this:

HTML- <ul style="padding-left: 20px; list-style: none;" class="list"> <li> Most Affordable </li> <li> Quick Shine </li> <li> No scratch removal </li> <li> No color change </li> </ul>

CSS- li:before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f007'; margin: 0 5px 0 -15px; }

** How in the world are we supposed to do screenshots on this forum??