creating custom blocks in RStudio's bookdown

Question

I'm experimenting with the great new package bookdown to create a gitbook-style book using RMarkdown within RStudio. See here.

My question is about creating custom blocks. There is an example in the documentation of how to define a block style in a CSS file:

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

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

AFAIK, there is not an example of how to define this specific block with an icon. I don't know much about CSS, so looking for something I can modify.

I'd like to use font awesome icons like Leanpub does to create some special sidebars. Any ideas for creating something like this:

I think I would need to copy the fontawesome directory, specify the path to the included fontawesome css file (somewhere, not sure where), and use the <i> tag in my div definition, e.g., <i class="fa fa-comment"></i>. Not real clear on how to implement this though...or if it would even work.

Answer 1

Thanks to @Frank's 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 in the root of my book's 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 cheatsheet.

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

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

Finally, I inserted a code chunk 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.
```