Markdown - icon on the left of a title

Question

so what I want is on a given H1 main title to have an icon on the left-hand side. Unfortunately, so far I did not find any way to achieve this. One potential variant is to write bare bone HTML for both, however, I don't get the benefit of the markdown inside the title. Does anyway know any better way to do this?

First to show what I actually want is this (this was done with picture editor for demonstration):

I have tried this:

![image-title-here](https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png)
# Quite a long title, potentially going over several lines

Quite a long title, potentially going over several lines

This does not work at all

![](https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png){:style="float: right;margin-right: 7px;margin-top: 7px;"}
# Quite a long title, potentially going over several lines

{:style="float: right;margin-right: 7px;margin-top: 7px;"}

Quite a long title, potentially going over several lines

Using html like so, does not recognize the markdown:

 <p align="center"> ![]((https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png) </p> 

Using direct html also:

 <div style="float: left;"><img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png" width="128" height="128"/></div> # Quite a long title, potentially going over several lines 

Here if the title is not on a new line it is not recognized as markdown.

EDIT The suggested answer looks correct on stackoverflow, but on my github it looks like this:

The question is can we make the title to be aligned with the top of the image?

Answer 1

I used image html tag and a space before the header for my GitHub project repository README.md file. to set my image on the left and title on the right. Here is the code for it.

<img align="left" width="80" height="80" src="https://raw.githubusercontent.com/akarsh/akarsh-seggemu-resume/master/akarsh%20seggemu%20resume/Assets/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60%403x.png" alt="Resume application project app icon">

# Resume application project

This is how it looks,

You can see the project readme by clicking on this link to the GitHub repository

Answer 2

Bad news, GitHub does not support the full set of HTML elements in a README.md file. Here is a write-up about what is supported. I also found out a bit more in this StackOverflow question from 4 years ago.

One of the resources mentioned in that question is this whitelist .

If it worked, what you would need is similar to what is below, which I have kept for your reference. The description is aimed at your problem description. Unfortunately, it looks like GitHub overrides the style attribute, replacing it with width: 100% and forcing the text to wrap below the image.

What should work (but doesn't): The style is attached to the image itself. Attaching it to the div affects the entire div. Note: the <h1> consists of both the image and the text.

  
 
  
  
 
   
 
    
    
<h1> <img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png"
  width="128"
  height="128"
  style="float:left;">
    # Quite a long title, potentially going over several lines and on and on and on and on and on and on and on and on and on