After a long break from mending my Github, I returned and started with setting up my github profile.

Basics

In order to set up the profile page add various personal details on the profile page, a new repository is needed, with the name set up as github username. (for instance, in my case, my id is uk960214, therefore I created a repository with the name “uk960214”)

The readme.md file on this repository will be shown in the profile page.

Problem encountered

All was well until I wanted to add image icons to the readme file.

Adding image to markdown

According to a github markdown cheat sheet there were 2 ways of adding image markdown syntax.

1. inline style

![alt-text]('image link')

2. reference style

![alt-text][image]


[image]: image_link

Additionally, in markdown, all of html syntaxes is available in markdown, so the following is also possible.

3. html style

<img src="image link" alt="alt-text">

Resizing image in markdown

As mentioned above, all of html syntaxes is available in markdown, in order to add style, or in this case resize images, css styling is one avaiable option.

<style>
img[alt="alt-text"] {width: 15px;}
</style>

However in Github Markdown the only way to resize image is to directly add the style inline, through html syntax, as per this answer in Stack Overflow.

<img src="image link" alt="alt-text" width="15px">