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

Shilpa K
Shilpa K
12,722 Points
Posted by Shilpa K
Shilpa K
12,722 Points

Downloading icon sets and accessing the icon in HTML/CSS

I'm trying to create a social media icon page using an icon set I've downloaded. The set opens up in a photoshop file.

What is a method for accessing specific icons (such as Facebook, Twitter, not all the icons) to input into my website? I'm confused on how you would import any of the icons into your text file...

2 Answers

Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points
Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points

First thing: save the icon that you want to use as a png or jpg ( i think png works better for an icon). Then in the html file you can use the tag <img> and the attribute "scr" to target the image that you want to load on your project.

<img src="path to the image">

You should put the image in the same folder of the html file, then you just put the name of the image on the attribute. Example: If your image name is facebook.jpg, and is in the same folder of your html, you should use:

<img src="facebook.jpg">

This may help you understand better

Il suggest you the track "how to make a website" to learn the basic of html and css.

Shilpa K
Shilpa K
12,722 Points
Shilpa K
Shilpa K
12,722 Points

I am wondering if the icons are all in a set in photoshop (each on its own individual layer in the program), can I access each individually from the file (and if so, how do I do this in CSS)?

Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points
Soufiane Bdaoui
Soufiane Bdaoui
9,602 Points

Well, then you must cut them and save them as jpg or png. Then you can use the tag <img> to put them in your html. I think that you can use some properties like background-image to import them directly on the css but using the html is more simple and clean.