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.

4

1 回答 1

13

感谢@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.
```

在此处输入图像描述

于 2016-03-31T20:56:05.620 回答