箇条書きのdotをFontAwesomeにするUserCSS

行頭のdotをFontAwesomeの任意のアイコンにするUserCSS

使い方

1. https://fontawesome.com/v5/search?s=solid&m=free から使いたいアイコンを検索する

2. 右上に表示されるUnicodeをコピーする

3. content: "/* ここ */"に貼り付ける

4. --dot-colorや--dot-sizeを調整する

code: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;

}

番号付きリストの記号を変える

code:style.css

.number-list .indent-mark:not(style="width: 0em;"):has(.dot)::after {

content: "\f292"; /* hashtag */

}

参考