特定のリンクにアイコンをつけるUserCSS
URLに応じてアイコンを変えるUserCSS
共通設定
先頭にアイコンをつける
code:style.css
.line span:not(.deco-\.) > span > a.link:is(
)::before {
display: inline-block;
width: 1em; /*16px;*/
height: 1em; /*16px;*/
vertical-align: -1px;/*-3px;*/
text-align: center;
background-size: contain;
background-repeat: no-repeat;
/* margin-right: 2px; */
}
個別の設定
アイコンの位置がちょっと微妙かもtakker.icon
直していただけると嬉しいです
code:style.css
content: '\f1c1';
font-weight: 400;
margin-right: 1px;
}
code:style.css
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f09b';
font-weight: 400;
margin-right: 1px;
}
code:style.css
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f266';
font-weight: 400;
margin-right: 3px;
}
URLはhttps://ja.wikipedia.org/wiki/:pagenameという形式なので、先頭から30文字だけ非表示にすればいい
.char-indexはCSSの優先度を上げるために付けている
code:style.css
.line .deco-\. a.link:is(
) span.char-index {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line .deco-\. a.link:is(
) span.char-index:nth-of-type(30) ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
code:style.css
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f270';
font-weight: 400;
margin-right: 1px;
}
code:style.css
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f167';
font-weight: 400;
margin-right: 1px;
}
Arch Linux
code:css
:is(.line, .line .deco) a.link:is(
)::before {
content: ' ';
font-weight: 400;
margin-right: 1px;
}
テンプレート
code:css
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f266'; /* Font Awesomeのアイコンの文字コード */
font-weight: 400; /* 通常はnormal(400), SOLIDアイコンはbold(700以上) */
margin-right: 1px; /* アイコンとリンク文字の間隔（隙間） */
}
URL 追加の方法
1. 共通設定にURLを追加
2. テンプレートを複製
3. テンプレート内の https://<ドメイン> の書き換え
4. テンプレート内の content: 書き換え
Settings.icon
UserCSS.icon
![https://i.gyazo.com/7031deebce32df5fd696879df98c34e0.png");](https://i.gyazo.com/7031deebce32df5fd696879df98c34e0.png");){kind=link}