XF 2.2 Replace Nav tabs with images?

[BrainlessGaming]

Does anyone know a way to replace the nav tabs with images?

 

[BrainlessGaming]

I've managed this:

but still trying to figure out how to get rid of font, and increase image size. This was the code I used in extra.css

.p-navSticky.is-sticky {
position: static;
}
.p-nav-scroller.hScroller {
margin: auto;
}
[data-nav-id="EWRporta"]:before {
.m-faBase();
content: "";
background-image: url('home.png');
background-size: 100% 100%;
display: inline-block;
height: 100%;
width: 100%;
}
[data-nav-id="forums"]:before {
.m-faBase();
content: "";
background-image: url('forums.png');
background-size: 100% 100%;
display: inline-block;
height: 100%;
width: 100%;
}
[data-nav-id="members"]:before {
.m-faBase();
content: "";
background-image: url('members.png');
background-size: 100% 100%;
display: inline-block;
height: 100%;
width: 100%;
}
[data-nav-id="serverlist"]:before {
.m-faBase();
content: "";
background-image: url('servers.png');
background-size: 100% 100%;
display: inline-block;
height: 100%;
width: 100%;
}

 

[BrainlessGaming]

I'm also trying to get rid of the scroller so the nav bar will just center on whole page. If anyone can assist that would be amazing.