Just take a look at the CSS of the Snow Flat theme. You need a (custom) font to provide the symbols you want to use (unless you can use existing Unicode characters), and then prepend the navigation links with the desired symbol characters.
Example:
@font-face {
font-family: MySymbols;
src: url("/customsymbols.woff");
}
#nav-link-foo::before {
font-family: MySymbols;
content: "\2a";
}
#nav-link-bar::before {
font-family: MySymbols;
content: "*";
}
The ::before selectors prepend the elements with the IDs "nav-link-foo" and "nav-link-bar" with the character(s) given in the respective content property. In the above example it's both times the character "*", or rather the glyph at the position of the ASCII character "*" in customsymbols.woff. The backslash notation (\2a) allows you to reference arbitrary Unicode characters without having to Unicode-encode the CSS file.
The actual Snow Flat CSS is more elaborate than the simple example above, but the principle is the same.
