箇条書きのバレットをFontAwesomeにするCSS
箇条書きのバレットをFontAwesomeにする
アイコン指定
code:style.css
.line .indent-mark .dot::before {
display: block;
/* position: inherit; */
/* top: -12px; */
position: absolute;
/* right: -5px; */
top: -10px;
/* font-family: FontAwesome; /* old */
font-family: 'Font Awesome 5 Free';
font-size: 6px;
content: '\f068'; /* マイナス記号:通常 */
/* content: '\f005'; /* スター:クリスマス用 */
/* content: '\f1b0'; /* 肉球:猫の日用 */
/* content: '\f1fd'; /* バースデーケーキ */
font-weight: 900;
color: #c9c9c9;　
}
規定のbullet（・）を消す
code:style.css
.line .indent-mark .dot {
background-color: transparent;
}
bulletのサイズ
code:style.css
.indent-markstyle*="width: 1.5em" .dot::before,
.line .indent-mark .c-0 + .dot::before {
font-size: 10px;
}
.indent-markstyle*="width: 3em" .dot::before,
.line .indent-mark .c-1 + .dot::before {
font-size: 9px;
}
.indent-markstyle*="width: 4.5em" .dot::before,
.line .indent-mark .c-2 + .dot::before {
font-size: 8px;
}
.indent-markstyle*="width: 6em" .dot::before,
.line .indent-mark .c-3 + .dot::before {
font-size: 7px;
}
bulletの色
code:style.css
.indent-markstyle*="width: 1.5em" .dot::before,
.indent-mark .dot:nth-child(6n+2)::before {
color: #EDAD0B;
}
.indent-markstyle*="width: 3em" .dot::before,
.indent-mark .dot:nth-child(6n+3)::before {
color: #C7243A;
}
.indent-markstyle*="width: 4.5em" .dot::before,
.indent-mark .dot:nth-child(6n+4)::before {
color: #932674;
}
.indent-markstyle*="width: 6em" .dot::before,
.indent-mark .dot:nth-child(6n+5)::before {
color: #3261AB;
}
.indent-markstyle*="width: 7.5em" .dot::before,
.indent-mark .dot:nth-child(6n+6)::before {
color: #009F8C;
}
.indent-markstyle*="width: 9em" .dot::before,
.indent-mark .dot:nth-child(6n+7)::before {
color: #c9c9c9;
}