特定のリンクにアイコンをつけるUserCSS
/villagepump/特定のリンクにアイコンをつけるUserCSS
https://www.google.com/
計算機援用証明と精度保証付き数値計算 | 荻田武史
https://github.com/
音楽をJPEGで聴いている
共通
外部リンクを区別するUserCSSを無効にする
code:style.css
div.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):is(
href$=".pdf",
href$="_pdf",
[href^="https://github.com"]
)::after {
display: none;
}
先頭にアイコンをつける
code:style.css
.line span:not(.deco-\.) > span > a.link:is(
href$=".pdf",
href$="_pdf",
[href^="https://github.com"]
)::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; */
}
個別
PDF
code:style.css
:is(.line, .line .deco) a.link:is(
href$=".pdf",
href$="_pdf",
)::before {
font-family: 'Font Awesome 5 Free';
content: '\f1c1';
font-weight: 400; /* use Regular Style */
margin-right: 1px;
}
Github
code:style.css
:is(.line, .line .deco) a.link:is(
[href^="https://github.com"],
[href^="https://raw.githubusercontent.com"],
[href^="https://gist.github.com"],
)::before {
font-family: 'Font Awesome 5 Brands';
content: '\f09b';
font-weight: 400;
margin-right: 1px;
}
Twitter
code:style.css.old
:is(.line, .line .deco) a.link:is(
[href^="https://x.com"]
)::before {
font-family: 'Font Awesome 5 Brands';
content: '\f099';
font-weight: 400;
margin-right: 1px;
}
テンプレート
code:css
:is(.line, .line .deco) a.link:is(
[href^="https://<ドメイン>"], /* 複数記述できる */
)::before {
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands"
content: "\f266"; /* Font Awesomeのアイコンの文字コード */
font-weight: 400; /* 通常はnormal(400), SOLIDアイコンはbold(700以上) */
margin-right: 1px; /* アイコンとリンク文字の間隔（隙間） */
}
UserCSS