Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
+2 votes
431 views
in Themes by
edited by

How to create this type of navigation? (SnowFlat)

Q2A version: 1.8.9
by
The image you've posted is not very clear.

1 Answer

0 votes
by

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.

...