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
Anthony Soltero
4,839 PointsCreating the Menu and Footer Extra Credit - Building a Simple PHP Application
Hello all,
I am working on the extra credit for the Menu and Footer section of the Build a Simple PHP Application course.
What I am stuck on is creating a new icon for the Company Info list item in the header and modifying the CSS appropriately.
I have modified the CSS to have all header list items showing up appropriately in the header with enough space in between; I just can't seem to get an image to the Company Information list item.
I have already searched the forms and have learned about sprites and how they work. I assume this is the best route to go since the other icons came from the sprite file. I tried to figure it out on my own but I am having no success. I tried using wearekiss.com to create a new sprite image but every image I placed there seemed to be way too large.
Can someone please walk me through the process of finding an icon, adding it to the current sprite file (or creating a new file), and how to implement that in CSS?
Any help is greatly appreciate!
2 Answers
James Home
12,011 PointsI would actually use SVGs or fonts, rather than a png sprite. Iconic (paid) for SVG or font-awesome for font based.
It is difficulty to know what you are doing without seeing it in codepen/workspaces/an actual page.
thomascawthorn
22,986 PointsThe easiest way would be to use something like adobe illustrator or photoshop - have you got these or similar?
All you need to do is combine a sequence of images in a single image, and be able to work out the pixel distances between the top and left sides - There must be something free out there that will do the basics of photoshop! Are you on a mac?