Do you like Salesforce icons and would like to use them in your Visualforce pages? Find below the transparent quide on how to do so.

At first you have to find out url of the icon. Right click on your favorite Salesforce icon and select “Inspect element“ (if you use firebug, you can use it). Find url for selected icon in Cascading style sheets (the exact technique is hard to describe due to difference in icon styles, web browsers and users’ work technique with HTML and CSS).

Below list of icons can help you find the proper icon more quickly:
http://free-121d5f44d20-121d603d1c5-121ee2b8103.force.com/force2b/salesforceicons

 

Some users may find it convenient to move the pointer (mouse) over the icon and see url of the icon displayed shortly after.

Once you have url of the icon, you have 2 options – the same as Salesforce or direct.

1.Salesforce uses simple image with dimensions 1×1 px – ‘/s.gif’.  Style class is used to apply the icon, which locates the original icon on the background. Here is example:

2.Using your own icon or having problems finding the style class of the icon, you can define it by yourself. Use CSS styles with your icon serving as background image but don’t forget to define correct dimensions (height and width). I defined position:relative, top and left options to centre the position.

Using url of the icon in src of image is much simpler, but it doesn’t  provide so much customizable options via CSS like in the first option. Put icon url address directly into the value parameter:

 I recommend to set width and height parameters too.

 

I used Visualforce tag apex:image in above examples. However, big Visualforce page with big data requires to achieve low view state by using standard HTML tag <img/>  instead of apex:image.

As the result, first example will change

from <apex:image value=”/s.gif” styleClass=”helpIcon” />

to <img src=”/s.gif” class=”helpIcon” />

Have a nice day :)