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?

Please show what you have tried. This description is not sufficiently clear as it stands. — Greg Tarsa, Mar 13 '17 at 18:32
I've edited to try to describe what I want. If you need more details let me know. — Alex Botev, Mar 13 '17 at 19:24

score 12 · Answer 1 · answered Dec 24 '18 at 00:33

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

score 2 · Accepted Answer · edited May 23 '17 at 12:09

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

edited May 23 '17 at 12:09

Community

1
1

answered Mar 13 '17 at 21:35

Greg Tarsa

1,622
13
18

Ah, that is yes! Unfortunately, on my github the title starts at the bottom of the image, check the updated question. – Alex Botev Mar 14 '17 at 01:52
What do you mean by "on my github"? I suspect that there may be some CSS attached to the H1 or IMAGE, but I can't explore that from what you have described. You would need to use the Computed Styles tab in the Browser Inspector to find out more. [This article](http://docs.joomlabamboo.com/getting-started/how-to-use-the-computed-panel-in-the-chrome-inspector) is an introduction. – Greg Tarsa Mar 14 '17 at 18:47
I mean when I apply it on a github repository. Essentially I want this to be displayed this way when github renders my README. I will read the arcticle thanks! – Alex Botev Mar 15 '17 at 12:34
I am not familiar with web pages attached to github repos, but I'm interested in learning more. Can you point me to a page that describes them. Bonus points if it talks about HTML in those pages. – Greg Tarsa Mar 15 '17 at 14:32
So this is the repo I'm testing: https://github.com/botev/test. As to your question I think this is the correct place: https://github.com/github/markup – Alex Botev Mar 15 '17 at 15:46
I did not know one could put HTML in a README.MD. Interesting. Also, I see the problem and updated the answer. You do not want to put any `
` elements at the beginning and also need to include the `` element and the text within the same `
` element.
– Greg Tarsa Mar 15 '17 at 16:00
I did not know my self until recently. I've updated according to your suggestion, you can check the test repo again, however still the title only first line is aligned at the image – Alex Botev Mar 15 '17 at 16:14
I was finally able to reproduce this in my own account, identify the problem--Github is sanitizing the HTML you provide it and find some references to the situation. I have updated my answer accordingly. I know I was not able to help solve your problem, but I would appreciate your marking this answer as definitive so it may help others. – Greg Tarsa Mar 16 '17 at 00:19

Markdown - icon on the left of a title

Quite a long title, potentially going over several lines

Quite a long title, potentially going over several lines

2 Answers2

` element.