creazione di blocchi personalizzati nella Rubrica di RStudio

Question

Sto sperimentando con il nuovo fantastico pacchetto bookdown per creare un libro in stile gitbook utilizzando RMarkdown in RStudio. Vedi here.

La mia domanda riguarda la creazione di custom blocks. C'è un esempio nella documentazione di come definire uno stile di blocco in un file CSS:

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

E gli autori dare alcuni esempi di quello che blocchi potrebbe essere simile.

AFAIK, non v'è un esempio di come definire questo blocco specifico con un'icona. Non so molto di CSS, quindi cerco qualcosa che possa essere modificato.

Mi piacerebbe usare font awesome icons come Leanpub per creare alcune barre laterali speciali. Tutte le idee per la creazione di qualcosa di simile:

penso che avrei bisogno di copiare la directory fontawesome, specificare il percorso del file css fontawesome incluso (da qualche parte, non so dove), e utilizzare il tag <i> nella mia definizione div, ad es. <i class="fa fa-comment"></i>. Non è chiaro su come implementare questo però ... o se funzionerebbe anche.

Answer 1

Grazie a @Frank's tip (vedere his solution per l'utilizzo di immagini locali), sono riuscito a ottenere quanto segue.

ho aggiunto questo al file style.css nella radice della directory del mio libro sulla base di questo SO answer e 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; 
} 

ho ottenuto il valore f075 per l'icona commento da this FontAwesome cheatsheet.

Quindi ho scaricato il CSS toolkit from FontAwesome e copiato il file font-awesome.min.css nella directory principale della directory del mio libro. Ho aggiunto il seguente al mio file output.yml (nel modello ho iniziato con, style.css, toc.css era già presente):

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

Infine, ho inserito un pezzo di codice nel mio file Rmd utilizzando l'opzione 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. 
```