Need help with image on website

Posted on 2013-09-29
Medium Priority
Last Modified: 2013-09-29
Hi, I am creating a responsive website from a template(I will inform the client that it is a template, not 100% original, btw). I have it here as a test site:


You see the orange icons of a wrench, leaf, pencil? I would like to exchange those with other images. I see that I go to bootstrap.css and they are apparently here:


That's all I can find out. If I open that, it is an image with a lot of tiny icons. I hope someone can help me with this. Thanks.
Question by:mel200
  • 3
LVL 58

Expert Comment

ID: 39531285
It's called a sprite - one image with all the images you need on the site in it, it speeds website loading by only loading one image instead of lots of images.
You could just alter that image and replace the images with the ones you want.

Author Comment

ID: 39531426
OK, thanks- what I still don't understand is, they are so small. How does such a small icon become the larger image?
LVL 16

Accepted Solution

HagayMandel earned 2000 total points
ID: 39531452
These images are not taken from the sprite! They are characters that belong to the specific font FontAwesome, and inserted as content pseudo element:
For example for the leaf symbol, you have the following (taken from font-awesome.min.css line #34):
.icon-leaf:before {
content: "\f06c";

Open in new window


Author Comment

ID: 39531461
Cool. I guess I will look over fontawesome and see if I can find the type of icons I want... or just replace it with icons I want to use.

Author Closing Comment

ID: 39531469
That was the answer, thanks very much!

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question