PNGs or SVGs as nav links in TopBar?

(Paul Takeuchi) #1

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.

(Jannis from inStacks Software) #2

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

(Peter Danckwerts) #3

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.

(Paul Takeuchi) #4

@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>.