11

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.

enter image description here

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:

enter image description here

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.

Ben
  • 41,615
  • 18
  • 132
  • 227
Eric Green
  • 7,385
  • 11
  • 56
  • 102
  • I was wondering the same thing. I think the answer lies in https://bookdown.org/yihui/bookdown/style.css You can see the custom divs at the top. – Frank Mar 31 '16 at 19:57
  • 1
    That's interesting, @Frank. Seeing `background: #f5f5f5 url("images/caution.png") left center/3em no-repeat;` led me to search for how to use fontawesome icons in CSS. Investigating this [SO answer](http://stackoverflow.com/questions/14736496/use-font-awesome-icons-in-css). – Eric Green Mar 31 '16 at 20:06
  • Using [this cheatsheet](http://fontawesome.io/cheatsheet/), I see that the code for the comment icon is `fa-comment []`. [This example](http://codepen.io/astrotim/pen/IjJzL) shows how to use `:after`, one of the suggestions in the SO answer I referenced. `#wrap:after { content: "\f075"; font-family: FontAwesome;}` I don't quite get how to use it yet, but seems like we're moving in the right direction. – Eric Green Mar 31 '16 at 20:17
  • Cool. I am not using fontawesome myself. Local copies of images work: http://franknarf1.github.io/r-tutorial/_book/ (Scroll to the bottom.) I just copy-pasted Yihui's CSS and edited the file names and colors. (Icons taken from the link just above them.) – Frank Mar 31 '16 at 20:20
  • 1
    I might take this route instead. Thanks for sharing. Will post back if I learn enough about CSS to get the fontawesome idea over the finish line. – Eric Green Mar 31 '16 at 20:26

1 Answers1

13

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.
```

enter image description here

Community
  • 1
  • 1
Eric Green
  • 7,385
  • 11
  • 56
  • 102