Creating custom blocks in an RStudio bookdown

Question

I am experimenting with a new new bookdown package to create a gitbook style book using RMarkdown in RStudio. See here .

My question is about creating custom blocks . The documentation for determining the style of a block in a CSS file has an example:

 div.FOO { font-weight: bold; color: red; } 

And the authors give examples of what blocks might look like.

AFAIK, there is no example of how to identify this particular block using the icon. I don't know much about CSS, so I'm looking for something that I can change.

I would like to use font awesome icons , for example Leanpub does to create custom sidebars . Any ideas for creating something like this:

I think I will need to copy the fontawesome directory, specify the path to the included fontawesome css file (somewhere, don’t know where) and use the <i> in my div definition, for example <i class="fa fa-comment"></i> , It’s not entirely clear how to implement this, though ... or if it even works.

Answer 1

Thanks to the @Frank tip (see his solution for using local images), I was able to come up with the following.

I added this to the style.css file to the root of my book directory based on this SO answer and this specific example :

 .rmdcomment { padding: 1em 1em 1em 4em; margin-bottom: 10px; background: #f5f5f5; position:relative; } .rmdcomment:before { content: "\f075"; font-family: FontAwesome; left:10px; position:absolute; top:0px; font-size: 45px; } 

I got the value f075 for the comment icon from this FontAwesome font .

Then I downloaded the CSS toolkit from FontAwesome and copied the font-awesome.min.css to the root of my book directory. I added the following to my output.yml file (in the template I started working with, style.css, toc.css already present):

 bookdown::html_book: css: [style.css, toc.css, font-awesome.min.css] 

Finally, I inserted a piece of code into my Rmd file using the type option:

 ```{block, type='rmdcomment'} Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. Some text for this block. ```