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 Luke Ayres
Luke Ayres
6,170 Points

Is this code possible?

I want to have an icon added before each li item, is there anything obviously wrong with how I've code this code in Sass? Thanks all :) 

li{
        font-size: 20px;
        font-family: $main-font;
        margin-bottom: 20px;
        &:first-child:before{
            background: url("cog.png");
            width:10px;
            height:10px;
        }
    }

6 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I think you were on the right track with your sass but it took some fiddling and research on my part to get an image to display. I found that you have to set the content to something (space is ok) content: " "; And I also had to use display: inline-block. I saw one solution using floats and absolute positioning but display: inline-block seemed to work for me. So if you add those two properties then you should see your image.

In your question you mentioned that you wanted to add the icon before each list item but then your sass is only targeting the first one. I'll assume that maybe you were adding different icons to the other items and will target those separately.

That being said, if your goal is only to display an icon image before each list item, then a more standard solution would be to apply the background image to your list items and give them a padding-left value to make room for the image.

I did a codepen for you illustrating your code in the first list item and what I would consider the more standard solution for the second list item. They both look about the same so I would say that unless you have some unique requirements preventing the second solution, I would go with that one.

http://codepen.io/anon/pen/kbnDB/

The solution you're trying for would probably be more appropriate if you were using an icon font instead of icon images. Then you can use the generated content to display your icon font. Your content property would be set to the unicode value for the icon you're trying to use.

Julian Price
Julian Price
11,760 Points
Julian Price
Julian Price
11,760 Points

That's means that every list item will have cog.png

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The code is using first-child so it would select only the first li

Luke Ayres
Luke Ayres
6,170 Points
Luke Ayres
Luke Ayres
6,170 Points

Ah what does first-child do in this case then? At the moment I'm seeing nothing whatsoever so I thought maybe I was mixing up how the & attr works or I didn't set the :before correctly?

Julian Price
Julian Price
11,760 Points
Julian Price
Julian Price
11,760 Points

To be honest not sure because I have not worked with preproccesser yet like sass or less. But what I understand is that it's useful to say @ or $ primary-color or accent-color & such it's helpful with icons not So sure because I don't think you're wanting every list item to be icon-cog. I think that will be good olde CSS with an i class or whatever library you are using

Luke Ayres
Luke Ayres
6,170 Points
Luke Ayres
Luke Ayres
6,170 Points

Well at the moment I'm back to throwing the images into the html li objects themselves as I'm getting muddled with the css:before property. Thanks for your time Julian :)

Luke Ayres
Luke Ayres
6,170 Points
Luke Ayres
Luke Ayres
6,170 Points

That's really great, thank you for sparing the time to help Jason :) I remember watching a vid on TreeHouse about applying icon font I'll give that a go, one thing though if they're my own images how does unicode work? (on Icomoon they were provided)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Ok, maybe that's where you got the idea from. I was going to point out the video but couldn't remember which one.

This is something I don't have any experience with but I can try pointing you in the right direction.

You can look for a custom font generator tool which lets you provide your own icons and will then generate a font file for you. It looks llike the icomoon app will let you do this. See this part of the documentation: http://icomoon.io/#docs/importing

Your icons would have to be in svg format though and not png. This way they can scale without affecting quality.

You can do a search for "icon font generators" and will probably find many more.