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

For instance, <i></i> (from fontawesome) should be displayed as an icon if I import its CSS file in HTML.

Is there any solution in Markdown?

4 Answers

you can use html in your mark down as normal.

<style>
mark{ color:red;
}
</style>
<mark>what is DataBase</mark>

3

Edit: If you want to include FontAwesome icons in R Markdown (or Shiny Apps), there is now a package to do exactly that: . 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 (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 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></i>
To preview the correctly rendered html file, click
<a href="" title="preview on htmlpreview.github.io" target="_blank">here</a>. 

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

0

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}

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>text</h2>, in markdown-extra: ## text {.zocial-dribbble}.

3

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy