VS Codeのcodicon icon fontをmarkdownで使う
目的は、codiconのchevron-up,down,left,rightをmarkdownプレビューに表示すること。
microsoft/vscode-codiconsからcodiconフォント(codicon.ttf)を取得しC:\WINDOWN\FONTSにインストールする。
codicon.ttfを右クリックし、「その他のオプションを表示」を選択。- 「すべてのユーザーに対してインストール」を選択。
インストールしたcodiconフォントのコードポイントのうち、U+EAB4, U+EAB5, U+EAB6, U+EAB7 を有効にするスタイルシートを作成。
my_codicon.css
@font-face {
font-family: "codicon";
src: local("codicon.ttf") format("truetype");
unicode-range: U+EAB4-EAB7
}
.codicon, i[class*='chevron-'] {
font: normal normal normal 1em codicon;
font-family: codicon;
display: inline-block;
text-align: center;
}
.chevron-down:before { content: "\eab4" }
.chevron-left:before { content: "\eab5" }
.chevron-right:before { content: "\eab6" }
.chevron-up:before { content: "\eab7" }
settings.jsonにスタイルシートを登録。
"markdown.styles": [
"my_codicon.css"
]
codicon chevron iconのコードポイントはつぎのとおり。
- U+EAB7: chevron-up
- U+EAB4: chevron-down
- U+EAB5: chevron-left
- U+EAB6: chevron-right
次のようにHTMLでコードポイントを指定して記述するとプレビュー側に表示される。
<div>プレビュー側に<i class="codicon"></i>chevron-upと表示される。</div>
プレビュー側にchevron-upと表示される。
chevron-upchevron-downchevron-leftchevron-right
次のようにクラス名を指定して記述するとプレビュー側に表示される。
<div>プレビュー側に<i class="chevron-up"></i>chevron-upと表示される。</div>
プレビュー側にchevron-upと表示される。
こちらの記述方法は、markdownと混在させてもうまく認識してくれるようだ。
- chevron-up
- chevron-down
- chevron-left
- chevron-right
Specify code point
- U+EAB7: Up
- U+EAB4: Down
- U+EAB5: Left
- U+EAB6: Right
Specify class name
- chevron-up
- chevron-down
- chevron-left
- chevron-right
Modifier Letter Arrowhead
- U+02C4: ˄ Up
- U+02C5: ˅ Down
- U+02C2: ˂ Left
- U+02C3: ˃ Right
Black pointing triangle
- U+25B2: ▲ Up
- U+25BC: ▼ Down
- U+25C0: ◀ Left
- U+25B6: ▶ Right
White pointing triangle
- U+25B3: △ Up
- U+25BD: ▽ Down
- U+25C1: ◁ Left
- U+25B7: ▷ Right
Black pointing small triangle
- U+25B5: ▵ Up
- U+25BF: ▿ Down
- U+25C3: ◃ Left
- U+25B9: ▹ Right
BLACK MEDIUM POINTING TRIANGLE CENTRED
- U+2BC5: ⯅ Up
- U+2BC6: ⯆ Down
- U+2BC7: ⯇ Left
- U+2BC8: ⯈ Right
参考: