箇条書きのdotをFontAwesomeにするUserCSS
行頭のdotをFontAwesomeの任意のアイコンにする
UserCSS
使い方
2. 右上に表示されるUnicodeをコピーする
3. content: "/* ここ */" に貼り付ける
4. --dot-color や --dot-size を調整する
style.css.line .indent-mark .dot { display: none; }
:root {
--dot-color: #fff8; /* dotの色 */
--dot-size: 8px; /* dotのサイズ */
}
.indent-mark:not([style="width: 0em;"]):has(.dot)::after {
--size: var(--dot-size, 6px);
position: absolute;
top: calc(13px - var(--size) / 2);
right: calc(12px - var(--size) / 2);
display: inline-block;
width: var(--size);
font-family: "Font Awesome 5 Free";
font-size: var(--size);
font-style: normal;
font-weight: 900; /* Solid */
font-variant: normal;
line-height: 1;
color: var(--dot-color, var(--page-text-color, #555));
text-align: center;
content: "\f068"; /* minus */
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: auto;
}
番号付きリストの記号を変える
style.css.number-list .indent-mark:not([style="width: 0em;"]):has(.dot)::after {
content: "\f292"; /* hashtag */
}
参考