在 RStudio 的 bookdown 中创建自定义块答案

【问题标题】：creating custom blocks in RStudio's bookdown在 RStudio 的 bookdown 中创建自定义块
【发布时间】：2016-03-29 19:32:40
【问题描述】：

我正在尝试使用新软件包 bookdown 在 RStudio 中使用 RMarkdown 创建一本 gitbook 风格的书。见here。

我的问题是关于创建custom blocks。文档中有一个关于如何在 CSS 文件中定义块样式的示例：

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

作者还给出了一些块可能是什么样子的示例。

AFAIK，没有一个如何用图标定义这个特定块的例子。我对CSS不太了解，所以寻找我可以修改的东西。

我想像Leanpub 一样使用font awesome icons 来创建一些特殊的侧边栏。创建类似这样的东西的任何想法：

我想我需要复制 fontawesome 目录，指定包含的 fontawesome css 文件的路径（某处，不确定在哪里），并在我的 div 定义中使用 <i> 标签，例如，<i class="fa fa-comment"></i> .虽然不清楚如何实现这一点......或者它是否会起作用。

【问题讨论】：

我也在想同样的事情。我想答案就在bookdown.org/yihui/bookdown/style.css 顶部可以看到自定义的div。
这很有趣，@Frank。看到background: #f5f5f5 url("images/caution.png") left center/3em no-repeat;，我开始搜索如何在 CSS 中使用 fontawesome 图标。正在调查这个SO answer。
使用this cheatsheet，我看到评论图标的代码是fa-comment [&#xf075;]。 This example 展示了如何使用 :after，这是我引用的 SO 答案中的建议之一。 #wrap:after { content: "\f075"; font-family: FontAwesome;}我还不太明白如何使用它，但似乎我们正朝着正确的方向前进。
酷。我自己没有使用 fontawesome。图片的本地副本工作：franknarf1.github.io/r-tutorial/_book（滚动到底部。）我只是复制粘贴了 Yihui 的 CSS 并编辑了文件名和颜色。（图标取自它们上方的链接。）
我可能会选择这条路线。感谢分享。如果我对 CSS 有足够的了解以在终点线上获得令人敬畏的想法，我会回帖。

标签： css r rstudio bookdown

【解决方案1】：

感谢@Frank's tip（请参阅his solution 使用本地图像），我能够提出以下建议。

我根据SO answer 和this specific example 将其添加到我的书目录根目录下的style.css 文件中：

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

我从this FontAwesome cheatsheet 获得了评论图标的值f075。

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

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

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

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

【讨论】：