0

I created a Github page following this tutorial: https://guides.github.com/features/pages/

I have my index.md and _config.yml file. I added a /images/font-awesome/address-card-solid.svg file to add this image https://fontawesome.com/icons/address-card.

I displayed the image by adding this to index.md

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

It displays properly when I go to the site (username.github.io). But the image scales and takes up the whole screen, and also is only black and white in color. How do I make the image smaller and change the color of it? I am using Github markdown (modifying index.md file).

I tried importing the font-awesome CDN and using HTML to display the image but that does not show anything (as expected, as I am in a .md file).

SilentDev
  • 20,997
  • 28
  • 111
  • 214
  • Using kramdown you could appyl {:.your-css-class} in the previous line, see here: https://stackoverflow.com/questions/14675913/changing-image-size-in-markdown We have actually used a standard attribute, another option could be to write a plugin. – Christian Jan 25 '20 at 01:10

2 Answers2

0

You can use CSS, set color, or backgroundcolor. Be aware that the SVG includes a path object that maybe need also the CSS class.

double-beep
  • 5,031
  • 17
  • 33
  • 41
KargWare
  • 1,746
  • 3
  • 22
  • 35
0
<!DOCTYPE html>
<html>
<head>
<style>
img {
  background-color: #FFFFFF;
}
</style>
</head>
<body>
<p align="center"><img src="image.svg" /></p>
</body>
</html>

This will set the background white only for the specified image in a .md file, it should support other css stuff as well did not try.

furydrive
  • 372
  • 2
  • 5