箇条書きのバレットをFontAwesomeにするUserCSS
箇条書きのバレットをFontAwesomeにするUserCSS
code:style.css
.line .indent-mark .dot::before {
display: block;
/* position: inherit; */
/* top: -12px; */
position: absolute;
/* right: -5px; */
top: -10px;
番号なしリスト
code:style.css
/* font-family: FontAwesome; /* old */
font-family: 'Font Awesome 5 Free';
font-size: 6px;
content: '\f068'; /* 通常 */
/* content: '\f005'; /* スター:クリスマス用 */
/* content: '\f1b0'; /* 肉球:猫の日用 */
/* content: '\f1fd'; /* バースデーケーキ */
font-weight: 900;
}
f068のマイナス記号がオリジナル
既定のbulletを消す
code:style.css
.line .indent-mark .dot {
background-color: transparent;
}
箇条書きの深さによって色を変える
code:style.css
.indent-mark .dot:nth-child(6n+2)::before {
}
.indent-mark .dot:nth-child(6n+3)::before {
}
.indent-mark .dot:nth-child(6n+4)::before {
}
.indent-mark .dot:nth-child(6n+5)::before {
}
.indent-mark .dot:nth-child(6n+6)::before {
}
.indent-mark .dot:nth-child(6n+7)::before {
}
番号つきリスト
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
}
アイコン指定
code:style.css
.line.number-list .dot::before {
position: inherit;
top: -11px;
content: '\f292'; /* #:通常 */ /* content: '\f2dc'; /* 雪:クリスマス用 */
font-size: 4px;
}
フォントサイズ
code:style.css
.line.number-list .c-0 + .dot::before {
font-size: 8px;
}
.line.number-list .c-1 + .dot::before {
font-size: 7px;
}
.line.number-list .c-2 + .dot::before {
font-size: 6px;
}
.line.number-list .c-3 + .dot::before {
font-size: 5px;
}
.line.number-list .c-4 + .dot::before {
font-size: 4px;
}
番号付き箇条書きにFontAwesome
code:style.css
.line.number-list .dot {
background-color: transparent !important;
display: list-item;
}
.line.number-list .dot::before {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
top: -11px;
content: '\f292'; /* # */
font-weight: 900;
font-size: 11px;
opacity: 0.0;
}
.line.number-list .c-0 + .dot::before {
opacity: 1.0;
}
.line.number-list .c-1 + .dot::before {
opacity: 0.8;
}
.line.number-list .c-2 + .dot::before {
opacity: 0.6;
}
.line.number-list .c-3 + .dot::before {
opacity: 0.4;
}
.line.number-list .c-4 + .dot::before {
opacity: 0.2;
}