How to use CSS in Markdown?

Question

I want to use a CSS class in a Markdown file.

For instance, (from fontawesome) should be displayed as

Answer 1

Edit: If you want to include FontAwesome icons in R Markdown (or Shiny Apps), there is now a package to do exactly that: https://github.com/rstudio/fontawesome. The answer below is more general (not limited to R Markdown or FontAwesome) but somewhat of a workaround.

---

Not tested in Gitbook but i hope this works just as well as on github.

Here is one way for using Font Awesome icons in an html document written in markdown (with knitr). To be able to display the resulting html document correctly on github, I used a workaround by linking to htmlpreview.github.io/? (as niutech described here):

1. Download Font Awesome here and unzip into your local repository where you also saved the .Rmd file.
2. Tell markdown which .css file to use by adding font-awesome-4.4.0/css/font-awesome.css into the header of your .Rmd file. Note: you might need to change the version number to something other than 4.4.0.

3. Make sure to specify self_contained: no. jmcphers explained here that this option keeps pandoc from combining multiple files into a single file, which somehow messes up the paths specified in the font-awesome.css file.

4. In your .Rmd document, include a link to http://htmlpreview.github.io/?/url_to_html_on_github where you replace url_to_html_on_github with the url to your html file on github.

Here is a minimal working example (fa-5x just makes the icon larger, as described in these examples):

---
title: "Title"
author: "Author"
date: "DATE"
output: 
  html_document:
     css: font-awesome-4.4.0/css/font-awesome.css
     self_contained: no

---
<i class="fa fa-renren fa-5x"></i>

To preview the correctly rendered html file, click 
<a href="http://htmlpreview.github.io/?https://github.com/FlorianWanders/FAonGitHub/blob/master/MWE.html" title="preview on htmlpreview.github.io" target="_blank">here</a>. 

And the resulting preview (see also this github repository):

Answer 2

First of all, most of the markdown implementations allow you to use plain html

Where as some markdown implementations offer you an additional syntax for attributes, like ids and classes (e.g. php-markdown {#id .class} for block elements)

As far as I know, fontawesome always needs the leading <i>-tag. Other iconfonts (like weloveiconfonts) add the icon to a existing html tag <h2 class="zocial-dribbble">text</h2>, in markdown-extra: ## text {.zocial-dribbble}.

Answer 3

The simplest way to add custom css styles is to use Pandoc attributes syntax (which can convert Markdown to html, pdf, pppt and more)

Heading Identifiers:
### Red text title {#identifier .red}

Fenced Code Attributes:
{.red .numberLines startFrom="1"}

Inline Code Attributes:
`red text`{.red}

Bracketed Spans:
[This is *some red text*]{.red}

Link Attributes:
![alt text](the.jpg){.center}