アイコン記法の「アイコン」拡張CSS
通常文字化けするFontAwesomeなどのアイコンも、
[X.icon] で表示できるようにするというCSSです。PageMenuにお手軽アイコン利用を許可するCSSにて、Scrapboxでロードされているフォントについて調べてあります
AppIcons
a
a
Font Awesome 5 Free
a
a
test
____
abs
icon.cssimg:is(.icon, .inline-icon)::before {
content: attr(alt);
color: var(--page-text-color, #4a4a4a);
height: 1.3em;
width: 19.5px;
font-size: calc(1em * (19 / 16));
position: relative;
margin-top: -3px;
/* 画像を描画範囲から追い出す */
display: block;
margin-bottom: 100%;
/* .kamon::before rules */
font-family: "AppIcons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
}
img:is(.icon, .inline-icon) {
height: 1.3em;
width: min-content;
display: inline-block;
overflow: hidden;
vertical-align: middle !important;
}
.tooltip {
font-family: "AppIcons", "Font Awesome 5 Free", "Open Sans", Helvetica, Arial, "Hiragino Sans", sans-serif;
}
img:is(.icon, .inline-icon)::after {
content: attr(alt);
font-family: "AppIcons", "Font Awesome 5 Free";
color: var(--page-text-color, #4a4a4a);
font-size: 1em;
display: block;
line-height: 1em;
overflow: visible;
display: inline-block;
/* アイコンを中心に表示 */
position: absolute; /* not relative */
top: 3.5px;
left: 2.5px;
vertical-align: middle;
/* font awesome setup */
font-family: "Font Awesome 5 Free";
font-weight: 600;
/* .kamon::before rules */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
/* font-weight: normal; */
text-decoration: none;
text-transform: none;
}>インストール
style.css@import "/api/code/public-minaph/アイコン記法の「アイコン」拡張CSS/icon.css";