0

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?

Souradeep Banerjee-AIS
  • 117
  • 2
  • 10

1 Answers1

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
hcdocs
  • 1,078
  • 2
  • 18
  • 30
  • I followed these steps already, I am doing other modifications too in the docfx.css file which are showing up in the site, only thing is when I change this part like this, the icons dont get rendered properly for the toc items. I think I am not doing the css change properly for the same.What I am trying to achieve is the way the icons in the toc of Microsoft Documentation works, the small animation when you drop down a list item. – Souradeep Banerjee-AIS Sep 09 '20 at 14:15
  • This worked on my machine: Add in both CSS blocks `font-family: "Glyphicons Halflings";` – hcdocs Sep 10 '20 at 03:19