如何将图标放在Markdown中的图像上

时间:2018-12-13 12:25:46

标签: markdown font-awesome

有没有办法在markdown中在图像上放置一个字体图标?我将youtube视频的缩略图显示为链接,因此当您单击缩略图时,您将转到youtube视频,但是我想显示此

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

图像上方的

图标,表示它是视频。这可能吗?

1 个答案:

答案 0 :(得分:1)

这可能通过原始HTML来实现。

降价rules状态:

  

HTML是发布格式; Markdown是一种 writing 格式。因此,Markdown的格式语法只能解决可以以纯文本形式传达的问题。

     

对于Markdown语法未涵盖的任何标记,只需使用HTML本身即可。

当然,FontAwesome使用字体作为“图标”来显示图标,并且字体在发布方面非常重要。因此,Markdown不支持在文档的各个部分上设置不同的字体。那不是在“纯文本”中可以传达的东西。假定整个文档为单一字体,该字体由显示文档的程序/工具而不是文档本身定义。

因此,您将需要使用原始HTML。只需包括显示FontAwesome图标所需的适​​当HTML和/或CSS。取决于您的设置,执行此操作的最佳方法可能非常正确。

当然,Markdown通常只生成HTML片段,这些片段需要传递给某些模板以创建完整的HTML文档。如果您有权使用所使用的模板,则应对其进行编辑以包括指向必要CSS的链接。按照Font Awesome site,在模板的<head>中使用它:

<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">

如果您无权访问任何模板,则可能会发现仅在Markdown文档的正文中添加上述link就足够了。

然后在Markdown文档的正文中,可以使用原始HTML定义图标。

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

但是,请注意,如果Markdown是由第三方网站(如StackOverflow)呈现的,则出于安全原因,他们很可能会剥离原始HTML。在这种情况下,就不可能做您想做的事。

注意:原始问题包括两个部分:(1)如何在Markdown中使用FontAwesome,以及(2)如何在视频缩略图上覆盖FontAwesome图标。我只回答了第一个问题。第二个答案与HTML答案相同,应作为一个单独的问题提出。