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

感谢@Frank 的提示（请参阅他的使用本地图像的解决方案），我能够提出以下建议。

style.css我根据这个SO 答案和这个特定示例将它添加到我的书目录根目录中的文件中：

.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;
 }

我从这个 FontAwesome 备忘单f075中得到了评论图标的价值。

然后我从 FontAwesome 下载了 CSS 工具包并将文件复制font-awesome.min.css到我的书目录的根目录中。我将以下内容添加到我的output.yml文件中（在我开始使用的模板中，style.css, toc.css已经存在）：

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

最后，我使用以下选项将代码块插入到我的 Rmd 文件中type：

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