Intro:
If you’ve created a dashboard and have multiple list view web parts that you’ve connected to one another so that they share parameters or filters, then you may be familiar with this default double arrow icon: 
You may have even found it to be located at _layouts/images/rbunsel.gif or _layouts/images/rbsel.gif (depending on whether it’s the “selected” or “unselected” icon).
And now you’re ready to replace it with something a little more fashionable. I recommend installing an icon package (free) on your site so that you can use icons from the set throughout your site to continue customizing various out of the box, and quite ordinary, icons. In this post, we’ll use FontAwesome. Check out their amazing set of icons at http://fontawesome.io/icons/ and even try searching for “open” or “expand” to see some good alternatives to the less-than-perfect double arrow default. For this example, let’s use fa-search-plus.
Ready to step up your icon game? Me too.
Let’s Do It:
Note: You can use a number of methods to install FontAwesome (free) on your site. I’m going to walk you through the steps of my chosen method which is to upload the icon family to my SiteAssets and call icons from there.
A. Download the FontAwesome package.
B. Unzip/extract downloaded folder and upload the unzipped folder to your Site Assets folder (via browser or SharePoint Designer).
C. Create a new .css file in your Site Assets folder or add the script from the next step to an ongoing custom.css file you may have referenced in your master page to replace every double-arrow in your site collection. In this example, we’ll just create a separate .css file to call on one single page which we’d like to see replaced icons. You can easily create a .css file in SharePoint designer by navigating to “Site Assets” in the left nav and then selecting “Asset” and “CSS.”
D. Copy and paste the following script into your new .css file replacing [SITEURL] with your own site URL preceding SiteAssets and making sure the font awesome folder name matches the one you’ve uploaded. Be sure not to upload “font-awesome-4.6.3/font-awesome-4.6.3/” as that’s the way it will unzip. You’ll want to upload the “font-awesome-4.6.3/” just before the next folder level where you’ll find the “fonts” folder.
[code]
<style type="text/css">
@font-face {
font-family: ‘FontAwesome’;
src: url(‘//[SITEURL]/siteassets/font-awesome-4.6.3/fonts/fontawesome-webfont.eot’);
src: url(‘//[SITEURL]/siteassets/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3′) format(’embedded-opentype’), url(‘//[SITEURL]/siteassets/font-awesome-4.6.3/fonts/fontawesome-webfont.woff?v=4.0.3’) format(‘woff’), url(‘//[SITEURL]/siteassets/font-awesome-4.6.3/fonts/fontawesome-webfont.ttf?v=4.0.3’) format(‘truetype’), url(‘//[SITEURL]/siteassets/font-awesome-4.6.3/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
/* Hide default double-arrow icon */
.ms-vb2 img {
display: none;
}
/* Expand arrow anchor to create clickable area */
.ms-vb2 a {
width: 20px; /* Update value as needed for icon size */
height: 20px; /* Update value as needed for icon size */
display: block; /* Required to effectively set image height and width to show full icon image */
}
/* Add icon to anchor */
.ms-vb2 a:before {
content: ‘\f00e’; /*Unicode code of chosen icon from FontAwesome*/
font-family: FontAwesome;
font-size: 16px; /* Size of icon */
color: #000000; /* Color of icon */
font-variant: normal; /* Reset parent style that can break glyph codes */
text-transform: none; /* Reset parent style that can break glyph codes */
}
/* Alter icon on hover */
.ms-vb2 a:hover:before {
color: #FFFFFF; /* Color of icon on hover */
}
</style>
[/code]
D. Create a content editor web part (CEWP) on the page on which you wish to see icons replaced (settings icons –> edit page –> insert –> web part –> media and content –> content editor –> add).
E. Edit CEWP and add link to your new .css file in the content link area. Click OK.
F. Save the page. Your new icons should now appear. Should you ever wish to change the icon to another one in FontAwesome’s directory, just change the four digit unicode code in your custom.css file via SharePoint Designer.
Enjoy your new, trendy icons and let me know if you run into any issues – I would be happy to help troubleshoot.