如何在 Markdown 中放置 fontawesome 图标？ （自述文件将上传到github）

Question

我想在我的自述文件中添加一些很棒的图标来解释它们在我的网站中的含义，但 Markdown 不允许使用 CSS，所以有什么办法可以克服这个问题？

这是我获得 图标

的地方

这将是 html

<i class="fas fa-crown"></i>

这是样式表链接

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

Answer 1

很简单，你做不到！

---

您可以做的就是下载所需的图像并将其包含在内，例如：

![fa-crown](fa-crown.svg)

或

<img src="fa-crown.svg" width="50" height="50">

如果您想了解更多信息：GitHub Flavored Markdown Spec

---

更新

您还可以使用 FontAwesome GitHub 存储库上托管的 FontAwesome 图像。因此你可以这样使用它：

<img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/crown.svg" width="50" height="50">

你会看到这个：

Answer 2

我也很惊讶，在我的 settings.json 中加载 fontawesome css 后，它不会渲染 HTML 图标标签

  "markdown.styles": [
    "https://use.fontawesome.com/releases/v5.7.1/css/all.css"
  ],

作为解决方法，我使用的是 VS Code Extension Font Awesome Gallery。安装此扩展程序后，您可以单击侧栏中的其图标，然后可以导航到所需的图标：

然后单击 Svg 菜单项和蓝色 Copy 按钮。将 svg 粘贴到您的 Markdown 单元格中。

要以所需的大小显示 svg，请将其包装在带有类的 HTML 标签中并添加样式元素，例如：

<style>
  .my-svg svg {
     width: 2em;
  }
</style>

<div class="my-svg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M309 106c11.4-7 19-19.7 19-34c0-22.1-17.9-40-40-40s-40 17.9-40 40c0 14.4 7.6 27 19 34L209.7 220.6c-9.1 18.2-32.7 23.4-48.6 10.7L72 160c5-6.7 8-15 8-24c0-22.1-17.9-40-40-40S0 113.9 0 136s17.9 40 40 40c.2 0 .5 0 .7 0L86.4 427.4c5.5 30.4 32 52.6 63 52.6H426.6c30.9 0 57.4-22.1 63-52.6L535.3 176c.2 0 .5 0 .7 0c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40c0 9 3 17.3 8 24l-89.1 71.3c-15.9 12.7-39.5 7.5-48.6-10.7L309 106z"/></svg>
</div>