Change the Default icon for the ToC Items - docfx

Question

Operating System: Windows
DocFX Version Used: 2.56.1.0
Template used: default
I was finding a way to change the default icon that shows up by the side of the toc items which is a "+" sign and which becomes a "-" sign once the list item is being expanded. I want it to be a right arrow which rotates into a down arrow while expanding the toc. I tried to modify the docfx.css file where this thing is mentioned like this (using glyphicon-menu-right):
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li.in > .expand-stub::before,
.toc .nav > li.in.active > .expand-stub::before,
.toc .nav > li.filtered > .expand-stub::before {
content: "\e258";
transition: transform .1s ease-in-out;
transform: rotate(0deg);
}
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > .expand-stub::before {
content: "\e258";
}
But the icons dont show up in the docfx site. What should I do regarding the same?

Answer 1

I was able to change them successfully using lines 512-522 in default/styles/docfx.css:
.toc .nav > li.active > .expand-stub::before,
.toc .nav > li.in > .expand-stub::before,
.toc .nav > li.in.active > .expand-stub::before,
.toc .nav > li.filtered > .expand-stub::before {
content: "x";
}
.toc .nav > li > .expand-stub::before,
.toc .nav > li.active > .expand-stub::before {
content: "y";
}
In theory, you should be able to paste this code (with your adjustments) in default/styles/main.css, and it will override the default CSS in default/styles/docfx.css.
This did not work for me until I put main.css in a custom template, but that could be my particular configuration, or my lack of understanding:
From directory root, add: template/styles/main.css
In docfx.json, add template:
"template": [
"default",
"template"
],
Also, make sure any fonts are referenced in the head partial (which may also need to be added to template/partials/head.tmpl.partial).