Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Joseph Torres
Joseph Torres
6,165 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

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,165 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/

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,165 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??