Change the Default icon for the ToC Items

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