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
Dot Dash
2,600 PointsHow are the twitter ect. icons already icons if there is no img tag? Is that specified in the css?
It seems like the twitter and linked in icons at the bottom should have an image tag, and then a href to make it a link, however I don't see one in the code. Can you make something an image in the html code as well as in css?
4 Answers
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 PointsIt's worth mentioning that this technique is best used for images that are purely design related. If an image is important to the content of the site, then you should add it via HTML. But if it's purely design related, then you can add it via CSS. The reasoning for this is for two things: "accessibility" and "semantic html." I'd be happy to go into more detail on those if you'd like.
Jacques Andre
2,780 PointsMost people use font awesome for icons which use the <i></i> tags. You can find out more about using icons here https://fontawesome.com/.
In this case they are using css to set the background-image as an icon!
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 PointsHi Dot,
You are correct! The icons appear on the screen as images because they're added through the CSS (as background images to be more precise). You can find the lines in the CSS file (lines 151-159):
a.twitter { background-image: url(images/twitter.svg); } a.linkedin { background-image: url(images/linkedin.svg); } a.github { background-image: url(images/github.svg); }
This is one of my favorite techniques for adding icons to a link, especially a link in a navigation. Nick Pettit will show you how to do this in the "How to Make a Website" course: https://teamtreehouse.com/library/how-to-make-a-website
Michael Wyatt
9,057 PointsAs a front-developer, I personally use CSS to pull in images, I switched over recently to font awesome for icons.
Catherine Paris
1,505 PointsCatherine Paris
1,505 PointsYes plz explain further
tylerduprey
Full Stack JavaScript Techdegree Student 25,399 Pointstylerduprey
Full Stack JavaScript Techdegree Student 25,399 PointsHi Catherine, I can't see how to directly reply to your comment so I'll answer here.
"Accessibility" is an important concept for HTML and CSS developers/designers. You need to think about people who have disabilities such as blindness or inability to use a mouse. Sometimes blind people use your site via a "Screen reader." It's just software that reads a website out loud to a blind person. If you add an image via CSS instead of adding it through the HTML with an image tag, the screen reader probably wont notice it's there since it usually uses the "alt" attribute inside of an image tag to describe an image to the user. So, if the image is important to the content of your site instead of being purely aesthetic, then you should put it in the HTML.
"Semantic HTML" can be very similar to accessibility. Basically, you want your HTML to be easily readable by robots that are crawling your site (I'm sure you've heard of the crawlers that Google uses to evaluate each site). Semantic HTML is also for other developers you might be collaborating with. The point is that your HTML should be structurally sound and make sense to the reader/bot. If you add an image through CSS instead of through an image tag in the HTML, the human or robot will have no idea it is there just by looking at your HTML. If the image is important to the content, then you should put it in the HTML with an image tag and an alt attribute . That way, a Google robot will pick up on it and evaluate the content of your site accurately. If the image is purely for design, then you can add it through CSS if you want. In that case you don't care if the Google bot picks up on it. It's just for design any way.
I hope that makes sense!
Catherine Paris
1,505 PointsCatherine Paris
1,505 PointsThanks!