Add the Recycle Bin Icon to the QuickLaunch

Recycle Bin Icon on the QuickLaunch

Add a Recycle Bin icon

Why not add the icon to the quicklaunch?  This will make it look less like it’s just a part of the set of links, and be more recognizable to the users.

Want to add it?  Drop this code in:

<style>
@font-face
{
font-family:"SPO365Icons";
src:url("/_layouts/15/fonts/Office365Icons.eot");
src:url("/_layouts/15/fonts/Office365Icons.eot?#iefix") format("embedded-opentype"),
url("/_layouts/15/fonts/Office365Icons.woff") format("woff"),
url("/_layouts/15/fonts/Office365Icons.ttf") format("truetype"),
url("/_layouts/15/fonts/Office365Icons.svg#web") format("svg");
font-style:normal;
font-weight:normal;
}
 
#sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]:before {
font-family: "SPO365Icons";
content:"";
font-size:21px;
margin-right: 5px;
position: relative;
top: 2px;
font-weight:100;
}
 
#sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item[title="Recycle Bin"]{
font-size:11px;
color:#a5abb4;
font-weight:100;
}
 
#sideNavBox ul.ms-core-listMenu-root li.static > a.menu-item:hover[title="Recycle Bin"]{
color:#323A45;
}
</style>

Hide the QuickLaunch on SharePoint Pages with CSS

Hide the QuickLaunch in SharePoint

Sometimes you either need extra space or just want to hide the QuickLaunch on your SharePoint page or site.  While there is some functionality within SharePoint to hide the QuickLaunch completely throughout the site, there may be an instance where you’d just like to hide it from a page.

Want to hide it?

Drop this code in:

<style>
#sideNavBox{ DISPLAY: none; }
</style>

 

To modify the margin on the page so that the content is a little more centered, use this code.

<style>
#contentBox { margin-left: 50px }
</style>