I would love to use the vscode codicon.ttf in my readme.md

[lovettchris]

But I can't find a way to do it that doesn't get stipped out by github. The reason I want to use a proper truetype font is because png images do not work properly on light and dark themes and I can never get the png to match the size of the font the user is using. So I want to add this at the top of my readme:

<style type='text/css'>
@font-face {
	font-family: "codicon";
	src: url("vscode-lean4/media/codicon.ttf") format("truetype");
}

.codicon[class*='codicon-'] {
	font: normal normal normal 16px/1 codicon;
	display: inline-block;
	text-decoration: none;
	text-rendering: auto;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.codicon-pin:before { content: "\eb2b" }
.codicon-pinned:before { content: "\eba0" }
.codicon-go-to-file:before { content: "\ea94" }
.codicon-debug-pause:before { content: "\ead1" }
.codicon-debug-continue:before { content: "\eacf" }
.codicon-refresh:before { content: "\eb37" }
.codicon-quote:before { content: "\eb33" }
</style>

Then I can use these fonts like this in my readme:

2. Copy-to-comment: click <a class="link pointer mh2 dim codicon codicon-quote" title="copy state to comment"></a> to copy the contents of the widget to a comment in the editor.

3. Pin / unpin: click <a class="link pointer mh2 dim codicon codicon-pin" title="pin"></a> to split off a "pinned" tactic state widget, which tracks the tactic state at a fixed position, even if you move your cursor away.  You will see two new icons:

    - Unpin: <a class="link pointer mh2 dim codicon codicon-pinned" title="unpin"></a>  to remove the pinned widget from the info view.

    - Reveal file location: <a class="link pointer mh2 dim codicon codicon-go-to-file" title="reveal file location"></a> to move the cursor in the editor to the pinned location in the file.

4. Pause / continue: clicking <a class="link pointer mh2 dim codicon codicon-debug-pause" title="pause updating"></a> will prevent the tactic state widget from updating when the file is edited. Click  to resume updates.  Once paused you can then click <a class="link pointer mh2 dim codicon codicon-debug-continue" title="pause updating"></a> to resume updates.

5. Update: clicking <a class="link pointer mh2 dim codicon codicon-refresh" title="update"></a> will refresh the tactic state of the pinned widget.

Which in VS Code markdown rendering looks like this:

Notice how the fonts are very nicely colored and fit into the dark theme and fit the line height nicely and so on. Can you help me figure out how to do this and have it also work in github? Currently I get this mess:
https://github.com/lovettchris/vscode-lean4/tree/clovett/cleanup

[gjtorikian]

First, I think you're in the wrong place to post this question; this issue tracker is intended for html-proofer related issues.

But second, I don't think this will ever work in GitHub. They keep a tight lock over how they render markup, and I'm betting they strip out those styles, making them unavailable.

I would recommend just using images instead of the CSS there. Take a screenshot of the individual icons and refer to them as PNG files. Best of luck.