search

asciidoctor / asciidoctor-maven-examples

A collection of example projects that demonstrates how to use the Asciidoctor Maven plugin.
http://asciidoctor.org/docs/asciidoctor-maven-plugin
Other
198 stars 242 forks source link

Admonition icon not rendered in asciidoc-maven-site-example #67

Open ppalaga opened 6 years ago

ppalaga commented 6 years ago

Steps to reproduce:

cd asciidoc-maven-site-example
mvn clean site
google-chrome target/site/hello.html

Expected: the [TIP] admonition should be rendered with some kind of a bulb icon Actual: no icon at all - see the screenshot

image

abelsromero commented 6 years ago

Sorry, this a long standing known issue of the site goal. The site embeds the generated HTML without Asciidoctor and fontawesome CSSs. That affects a lot of things like tables, icons, and several other stuff. The solution requires a specific CSS that merges gently with the site CSS, Dan summarizes it very well here https://github.com/asciidoctor/asciidoctor-maven-plugin/issues/166#issuecomment-132372732.

ppalaga commented 6 years ago

Thanks, I think I understand what's the problem. Where can I find the "standalone" asciidoctor css to steal the missing styles from?

abelsromero commented 6 years ago

The default CSS is here: https://github.com/asciidoctor/asciidoctor/blob/master/data/stylesheets/asciidoctor-default.css The font-awesom icons are imported using the CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Also, if you are going to play with the CSS, you may be interested in checking also the stylesheet factory: https://github.com/asciidoctor/asciidoctor-stylesheet-factory.