How well versed in CSS are you? Most Joomla 3 templates should come with the following list of icons (font icons): http://kyleledbetter.com/jui/icons/
The colors and sizes are easily adjustable due to them being vector graphics. Here is a complete list of CSS selectors for all the icons:

.icon-home:before {

    content: "!";

}

.icon-user:before {

    content: "\"";

}

.icon-checkedout:before, .icon-lock:before, .icon-locked:before {

    content: "#";

}

.icon-comment:before, .icon-comments:before {

    content: "$";

}

.icon-comments-2:before {

    content: "%";

}

.icon-share-alt:before, .icon-out:before {

    content: "&";

}

.icon-share:before, .icon-redo:before {

    content: "\'";

}

.icon-undo:before {

    content: "(";

}

.icon-file-add:before {

    content: ")";

}

.icon-new:before, .icon-plus:before {

    content: "*";

}

.icon-apply:before, .icon-edit:before, .icon-pencil:before {

    content: "+";

}

.icon-pencil-2:before {

    content: ",";

}

.icon-folder:before {

    content: "-";

}

.icon-folder-2:before {

    content: ".";

}

.icon-picture:before {

    content: "/";

}

.icon-pictures:before {

    content: "0";

}

.icon-list:before, .icon-list-view:before {

    content: "1";

}

.icon-power-cord:before {

    content: "2";

}

.icon-cube:before {

    content: "3";

}

.icon-puzzle:before {

    content: "4";

}

.icon-flag:before {

    content: "5";

}

.icon-tools:before {

    content: "6";

}

.icon-cogs:before {

    content: "7";

}

.icon-options:before, .icon-cog:before {

    content: "8";

}

.icon-equalizer:before {

    content: "9";

}

.icon-wrench:before {

    content: ":";

}

.icon-brush:before {

    content: ";";

}

.icon-eye-open:before, .icon-eye:before {

    content: "<";

}

.icon-checkbox-unchecked:before {

    content: "=";

}

.icon-checkin:before, .icon-checkbox:before {

    content: ">";

}

.icon-checkbox-partial:before {

    content: "?";

}

.icon-asterisk:before, .icon-star-empty:before {

    content: "@";

}

.icon-star-2:before {

    content: "A";

}

.icon-featured:before, .icon-star:before {

    content: "B";

}

.icon-calendar:before {

    content: "C";

}

.icon-calendar-2:before {

    content: "D";

}

.icon-question-sign:before, .icon-help:before {

    content: "E";

}

.icon-support:before {

    content: "F";

}

.icon-warning:before {

    content: "H";

}

.icon-publish:before, .icon-save:before, .icon-ok:before, .icon-checkmark:before {

    content: "G";

}

.icon-unpublish:before, .icon-trash:before, .icon-cancel:before {

    content: "J";

}

.icon-eye-close:before, .icon-minus:before {

    content: "K";

}

.icon-purge:before, .icon-trash:before {

    content: "L";

}

.icon-envelope:before, .icon-mail:before {

    content: "M";

}

.icon-mail-2:before {

    content: "N";

}

.icon-unarchive:before, .icon-drawer:before {

    content: "O";

}

.icon-archive:before, .icon-drawer-2:before {

    content: "P";

}

.icon-box-add:before {

    content: "Q";

}

.icon-box-remove:before {

    content: "R";

}

.icon-search:before {

    content: "S";

}

.icon-filter:before {

    content: "T";

}

.icon-camera:before {

    content: "U";

}

.icon-play:before {

    content: "V";

}

.icon-music:before {

    content: "W";

}

.icon-grid-view:before {

    content: "X";

}

.icon-grid-view-2:before {

    content: "Y";

}

.icon-menu:before {

    content: "Z";

}

.icon-thumbs-up:before {

    content: "[";

}

.icon-thumbs-down:before {

    content: "\\";

}

.icon-delete:before, .icon-remove:before, .icon-cancel-2:before {

    content: "I";

}

.icon-save-new:before, .icon-plus-2:before {

    content: "]";

}

.icon-ban-circle:before, .icon-minus-sign:before, .icon-minus-2:before {

    content: "^";

}

.icon-key:before {

    content: "_";

}

.icon-quote:before {

    content: "`";

}

.icon-quote-2:before {

    content: "a";

}

.icon-database:before {

    content: "b";

}

.icon-location:before {

    content: "c";

}

.icon-zoom-in:before {

    content: "d";

}

.icon-zoom-out:before {

    content: "e";

}

.icon-expand:before {

    content: "f";

}

.icon-contract:before {

    content: "g";

}

.icon-expand-2:before {

    content: "h";

}

.icon-contract-2:before {

    content: "i";

}

.icon-health:before {

    content: "j";

}

.icon-wand:before {

    content: "k";

}

.icon-unblock:before, .icon-refresh:before {

    content: "l";

}

.icon-vcard:before {

    content: "m";

}

.icon-clock:before {

    content: "n";

}

.icon-compass:before {

    content: "o";

}

.icon-address:before {

    content: "p";

}

.icon-feed:before {

    content: "q";

}

.icon-flag-2:before {

    content: "r";

}

.icon-pin:before {

    content: "s";

}

.icon-lamp:before {

    content: "t";

}

.icon-chart:before {

    content: "u";

}

.icon-bars:before {

    content: "v";

}

.icon-pie:before {

    content: "w";

}

.icon-dashboard:before {

    content: "x";

}

.icon-lightning:before {

    content: "y";

}

.icon-move:before {

    content: "z";

}

.icon-next:before {

    content: "{";

}

.icon-previous:before {

    content: "|";

}

.icon-first:before {

    content: "}";

}

.icon-last:before {

    content: "";

}

.icon-loop:before {

    content: "";

}

.icon-shuffle:before {

    content: "";

}

.icon-arrow-first:before {

    content: "";

}

.icon-arrow-last:before {

    content: "";

}

.icon-chevron-up:before, .icon-uparrow:before, .icon-arrow-up:before {

    content: "";

}

.icon-chevron-right:before, .icon-arrow-right:before {

    content: "";

}

.icon-chevron-down:before, .icon-downarrow:before, .icon-arrow-down:before {

    content: "";

}

.icon-chevron-left:before, .icon-arrow-left:before {

    content: "";

}

.icon-arrow-up-2:before {

    content: "";

}

.icon-arrow-right-2:before {

    content: "";

}

.icon-download:before, .icon-arrow-down-2:before {

    content: "";

}

.icon-arrow-left-2:before {

    content: "";

}

.icon-play-2:before {

    content: "";

}

.icon-menu-2:before {

    content: "";

}

.icon-arrow-up-3:before {

    content: "";

}

.icon-arrow-right-3:before {

    content: "";

}

.icon-arrow-down-3:before {

    content: "";

}

.icon-arrow-left-3:before {

    content: "";

}

.icon-print:before, .icon-printer:before {

    content: "";

}

.icon-color-palette:before {

    content: "";

}

.icon-camera-2:before {

    content: "";

}

.icon-file:before {

    content: "";

}

.icon-file-remove:before {

    content: "";

}

.icon-save-copy:before, .icon-copy:before {

    content: "";

}

.icon-cart:before {

    content: "";

}

.icon-basket:before {

    content: "";

}

.icon-broadcast:before {

    content: "";

}

.icon-screen:before {

    content: "";

}

.icon-tablet:before {

    content: "";

}

.icon-mobile:before {

    content: "";

}

.icon-users:before {

    content: "";

}

.icon-briefcase:before {

    content: "";

}

.icon-download:before {

    content: "";

}

.icon-upload:before {

    content: "";

}

.icon-bookmark:before {

    content: "";

}

.icon-out-2:before {

    content: "";

}

I'll explain how to use this list. So if you want the "users icon" as the replacement icon for the friends icon you would do something like this:

body div#fd.es .navbar-inner .ies-users:before {

    content: "#";

    font-family: "icomoon";

}

By placing this code into your template and clearing your browser cache you will see the users icon replace the current friend icon. Assuming you want a different icon you can simply look through the list of icons, choose the one you want, and then copy the name of that icon. In this example the icon name is "icon-users". Search the big list above using control+F (mac users might use cmd+f) or simply using the browsers menu to search the page. After searching with "icon-users" you should stumble upon where it says:

.icon-checkedout:before, .icon-lock:before, .icon-locked:before {

    content: "#";

}

So if you want the friend icon to be something else, for example the cog icon you would search the visual list first. Then select/copy the name (icon-cog) and search the list I have above. Then modify the content property to go from "#" to "8" so that you end up with this:

body div#fd.es .navbar-inner .ies-users:before {

    content: "8";

    font-family: "icomoon";

}

By cross referencing my post and Kyle's icon list you can get the font icons you want. So now I'll give you all the selectors to work with:

/* Home Icon */

body div#fd.es .navbar-inner .ies-home:before {

    content: "3" !important;

    font-family: "icomoon";

}



/* Friend Icon */



body div#fd.es .navbar-inner .ies-users:before {

    content: "#" !important;

    font-family: "icomoon";

}



/* Mail Icon */



body div#fd.es .navbar-inner .ies-mail-2:before {

    content: "1" !important;

    font-family: "icomoon";

}



/* Notification Icon */



body div#fd.es .navbar-inner .ies-earth:before {

    content: "4" !important;

    font-family: "icomoon";

}

I added CSS comments to let you know exactly which icon you would be modifying. Remove the codes for the icons you do not want to modify. And remember, it's the content property that you will be modifying to change to your desired icon. Add the code to your template.css file. Let me know how it goes.