便签

说明

以文章目录中的折叠按钮为例

之前为折叠按钮添加了 toc-btn-toggle 类, 其CSS代码与折叠图标有关的有

1. after 为在标题后面添加图标
   
2. 图标来源
   

   Copy1<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"/></svg>

3. 初始旋转: 270度使尖尖朝左, 默认折叠
   
4. 展开时旋转: 180度使尖尖朝下
   
5. 注意: 使用单引号包裹svg链接
   

Copy 1// 文件夹打开关闭图片
 2.toc-btn-toggle::after
 3{
 4    width: 1.25em;
 5    line-height: 1.25em;
 6
 7    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#feffff" d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z"/></svg>');
 8
 9    transition: transform .35s ease;
10    transform-origin: 50% 50%;
11    transform: rotate(270deg);
12}
13
14.toc-btn-toggle[aria-expanded="true"]::after
15{
16    transform: rotate(180deg);
17}

侧面导航栏折叠按钮也是这个

导航栏折叠按钮

caret-up

便签