Fonts & Icons

Fonts

In Ace's demo, I use Open Sans font from Google fonts but you can use any font.
You can try some example fonts from settings box in Ace demo and by going to the Font option and selecting a different font.

Try Roboto which is very popular.

To use a font in Ace, just embed it like this:

html
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

And add new CSS rule or override ace.css:

css
html, body {
  font-family: 'Roboto', Arial, sans-serif;
}

You can change $base-font in scss/_variables.scss and rebuild css


Note that in Ace's demo I use the SemiBold (600) font weight frequently.

But in some fonts such as Roboto , it's not available.
Instead Roboto has a Medium (500) font weight but some fonts may have only Bold (700).

In that case you may want to change $font-semibold value to 500 or 700 in scss/_variables.scss and rebuild css

Icons

In Ace's demo, I use free version of FontAwesome but you can use any other icon set.

I haven't tested with SVG icons, but they should work as well.

In Icons page in demo, 3 other icon sets are shown as an example.

If you want to use a different font in sidebar, it might have different sizing than FontAwesome.
In that case you should change .nav-icon sizes and styling.

Take a look at views/pages/icons/@page-style.css

You can also edit scss/_sidebar-liststyle.scss and change .nav-icon rules or edit scss/_sidebar-themes-variables.scss and change icon-font-size values.