如何在 github 页面上更改 SVG 图像的颜色和大小答案

【问题标题】：How to change color and size of SVG image on github pages如何在 github 页面上更改 SVG 图像的颜色和大小
【发布时间】：2020-04-24 09:00:09
【问题描述】：

我按照本教程创建了一个 Github 页面：https://guides.github.com/features/pages/

我有我的 index.md 和 _config.yml 文件。我添加了一个/images/font-awesome/address-card-solid.svg 文件来添加这张图片https://fontawesome.com/icons/address-card。

我通过将其添加到 index.md 来显示图像

![useful image]({{ site.url }}/images/font-awesome/address-card-solid.svg)

当我访问站点 (username.github.io) 时，它会正确显示。但图像按比例缩放并占据整个屏幕，而且颜色也只有黑白。如何使图像变小并更改其颜色？我正在使用 Github markdown（修改 index.md 文件）。

我尝试导入字体很棒的 CDN 并使用 HTML 来显示图像，但没有显示任何内容（正如预期的那样，因为我在 .md 文件中）。

【问题讨论】：

使用 kramdown 你可以 appyl {:.your-css-class} 在上一行，看这里：stackoverflow.com/questions/14675913/… 我们实际上使用了一个标准的属性，另一个选项可能是写一个插件。

【解决方案1】：

您可以使用 CSS、设置颜色或背景颜色。请注意，SVG 包含一个可能还需要 CSS 类的路径对象。

【讨论】：