Support for css icon fonts like fontello

rbondi's Avatar


04 Feb, 2014 02:38 AM

In, I can display icons using css. For example, this: will display a folder icon.

Stackedit is simply using open source fonts available from

It would be nice if Marked could support css icon fonts as well.


  1. Support Staff 1 Posted by Brett on 04 Feb, 2014 02:41 AM

    Brett's Avatar

    You can include any webfont and use it any way you like.


  2. 2 Posted by rbondi on 04 Feb, 2014 02:53 AM

    rbondi's Avatar


    I downloaded and added the font awesome.css file it in Marked's Preferences > Style > Custom Css, but the icons are not displaying in Marked.


  3. Support Staff 3 Posted by Brett on 04 Feb, 2014 02:56 AM

    Brett's Avatar

    FontAwesome uses classes to display fonts. While it's entirely possible
    to do with a combination of Markdown and HTML, It's something well
    beyond what I'm able to provide support for here.


  4. 4 Posted by rbondi on 04 Feb, 2014 03:10 AM

    rbondi's Avatar

    OK, I found it:

    • After you add a css file in Preferences, it appears in Marked in the bottom left corner as another theme.

    Unfortunately, only the new css is used then. So when you select the new theme (which is named after the css file), the icons appear in Marked, but the rest of the text now looks like crap! :-(

    What Marked needs is the ability to include a custom css file with all themes, or at least specific ones. That way, icons could be added to every or any theme.

    FWIW, I tried this and it didn't work:

    • Paste the contents of the font awesome css file into Marked's "Custom example.css" file (in folder ~/Library/Application Support/Marked/Custom CSS)
    • Paste the "fonts" folder from Awesome fonts (in Font-Awesome-master/src/3.2.1/assets) into the ~/Library/Application Support/Marked/Custom CSS folder too (it contains the actual images used by the font, and is referenced with e.g. rc: url('../font/fontawesome-webfont.eot?v=3.2.1');

    Didn't work. When I then selected "Custom Css Example" theme from the lower left menu, I saw little squares instead of the icons.

    FWIW further references, which were not however helpful:

  5. Support Staff 5 Posted by Brett on 04 Feb, 2014 03:13 AM

    Brett's Avatar

  6. 6 Posted by rbondi on 05 Feb, 2014 02:59 AM

    rbondi's Avatar

    ok..... 1 point for making me look as dumb as I deserve...
    ...but... additional points because, after I pasted in the contents of the font-awesome.css file there, instead of the icons showing up, I get the little square everywhere.

    Where is the location of the file this "Additional CSS" is saved to? I need to put the font-awesome resources relative to it. (I tried grep-ing for some of its styles in and ~/Library/Application Support/Marked, but didn't find anything.)

    Thank you,
    /rb :-)

  7. Support Staff 7 Posted by Brett on 05 Feb, 2014 03:06 AM

    Brett's Avatar

    Ah, yeah, that would be problematic. It's stored in Marked itself and
    without a file location, so any references in it would have to be
    altered to be absolute paths.

  8. 8 Posted by rbondi on 06 Feb, 2014 01:07 PM

    rbondi's Avatar

    OK, I can live with that, thanks.

  9. 9 Posted by rbondi on 16 Feb, 2014 08:45 AM

    rbondi's Avatar

    FWIW, that works great. For the faint-of-heart/non-techie users:

    1. At, click the "Download zip" button (bottom right)
    2. Unzip it (if it hasn't been unzipped already), and move the resulting Font-Awesome-master folder somewhere permanent, like your Applications folder. For example, to /Applications/Font-Awesome-master.
    3. In your favorite text editor, open the file Font-Awesome-master/src/3.2.1/assets/font-awesome/css/font-awesome.css.
    4. Do a Find/Replace of all "url('../css" to e.g. "url('Applications/Font-Awesome-master/src/3.2.1/assets/font-awesome/font".
    5. Don't save this file - you're not going to use it!
    6. Copy the the contents of the file to your clipboard, e.g. Command-A, Command-C. (And you can close the file now.)
    7. Go into Marked's preferences, e.g. Command-,
    8. Click the Style icon.
    9. Click in the box "Additional CSS (applied to all themes)".
    10. Paste, e.g. Command-V
    11. Click the "Save and Apply" button.

    You're done. To test, put "<i class="icon-picture"></i>" into a markdown doc and view it with Marked. You should see a little folder icon.

    Thank you Marked!

  10. 10 Posted by rbondi on 16 Feb, 2014 03:34 PM

    rbondi's Avatar

    Brett... Dude... I just installed Version 2.2 (823), and it wiped out all my custom css! You might want to fix that with another update soon....

  11. 11 Posted by rbondi on 16 Feb, 2014 03:36 PM

    rbondi's Avatar

    Hmm, it didn't wipe out the CSS, it's still there; but the font icons are no longer working. Marked is back to displaying empty squares instead of the font awesome icons. ??

  12. Support Staff 12 Posted by Brett on 16 Feb, 2014 03:37 PM

    Brett's Avatar

    Are you talking about the "Additional CSS" or your custom stylesheets?
    Neither should have been wiped, but give me a better idea of what's


  13. 13 Posted by rbondi on 02 Mar, 2014 06:52 PM

    rbondi's Avatar

    Can no longer reproduce, can be closed; thx, rb.

  14. 14 Posted by rozling on 27 May, 2014 03:21 PM

    rozling's Avatar

    Hi rbondi, I'm looking to use Font Awesome in Marked too - am I understanding right that it's not possible any more using the method you outlined above?

  15. 15 Posted by rozling on 27 May, 2014 03:41 PM

    rozling's Avatar

    nevermind - followed the instructions and got it working. Thanks rbondi and thanks Brett :D

  16. rbondi closed this discussion on 04 Jul, 2014 11:59 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts


? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac