CODEWITHSUNDEEP
markdownfont-awesome
Truls
Truls

Reputation: 55

How to put icon over image in markdown

Is there a way to place a fontawesome icon over an image in markdown? I display the thumbnail of a youtube video as a link so when you click on the thumbnail you go to the youtube video, but I would like to display this

https://fontawesome.com/icons/play-circle?style=solid

icon over the image to indicate that it's a video. Is this possible?

Upvotes: 4

Views: 8500

Answers (1)

Waylan
Waylan

Reputation: 42517

This may be possible with raw HTML.

As the Markdown rules state:

HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

Of course, FontAwesome uses a font as a "hack" for displaying icons and fonts are very much on the publishing side of things. Therefore, Markdown has no support for setting a different font on parts of the document. That is not something which can be conveyed in "plain text." The entire document is assumed to be in a single font which is defined by the program/tool displaying the document, not by the document itself.

Therefore, you would need to fall back to using raw HTML. Simply include the appropriate HTML and/or CSS necessary to have the FontAwesome icon display. Depending on your setup, the best way to do this may very.

Of course, Markdown generally only generates HTML fragments which need to be passed to some template to create a complete HTML document. If you have access to the templates you are using, you should edit them to include the link to the necessary CSS. As per the Font Awesome site, use this in the <head> of your template:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

If you don't have access to any templates, then you may find that simply adding the above link in the body of the Markdown document is sufficient.

Then in the body of your Markdown documents, you can use raw HTML to define your icon.

<i class="fas fa-play-circle"></i>

However, be aware that if the Markdown is being rendered by a third party site (like StackOverflow), then it is likely that they will strip out raw HTML for security reasons. In that case, it would be impossible to do what you want.

Note: The original question has two parts: (1) how to use FontAwesome in Markdown and (2) how to overlay a FontAwesome icon over a video thumbnail. I only answered the first question. The answer to the second would be the same as it would for HTML and should be asked as a separate question.

Upvotes: 7

Related Questions