PNGs or SVGs as nav links in TopBar?

I’d like to use some fonts and icons and styling beyond what font awesome and google fonts offer and was wondering if there was a way to use image files instead of text for navigation in topbar? I’d love to be able to swap in hover images as well. Or even better yet use a long master png and load segments of it for each graphic link. Any help would be appreciated.

Try to add a img tag into the same place where you would put the title of the page.

It will not do your site ranking any good to replace navigation text with graphics. You aren’t restricted to Google fonts. Have a look at

I have no idea what a long master png is.

@instacks, yes I believe that is the way, but I do want to make sure that page titles are accessible by Google and I don’t get penalized with site rank or SEO.

@ peter, “image sprite” was the term I couldn’t think of where one master file is loaded with a bunch of images inside it, with each image defined by a position and width and height.

Once I remembered image sprite, I was able to google more successfully and it seems there are some solutions using images and wrapping page titles in say p tags then hiding them with css display: none so only images show, but seo reads the page titles inside <p>TITLE</p>.