Home → Suggestions →

Support for css icon fonts like fontello

• Edit

rbondi

04 Feb, 2014 02:38 AM

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

Stackedit is simply using open source fonts available from http://fontello.com.

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

Thanks,
/rb

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

   

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

   -Brett

   • Edit

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

   

   How?

   I downloaded https://github.com/FortAwesome/Font-Awesome and added the font awesome.css file it in Marked's Preferences > Style > Custom Css, but the icons are not displaying in Marked.

   Thanks,
   /rb

   • Edit

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

   

   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.

   -Brett

   • Edit

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

   

   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:

   • http://markedapp.com/help/Special_Features/Custom_Styles.html
   • http://support.markedapp.com/kb/how-to-tips-and-tricks/writing-cust...
   • Edit

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

   

   

   • Edit

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

   

   ok..... 1 point for making me look as dumb as I deserve...
   ...but... ...zero 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.

   Question:
   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 Marked.app and ~/Library/Application Support/Marked, but didn't find anything.)

   Thank you,
   /rb :-)

   • Edit

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

   

   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.

   • Edit

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

   

   OK, I can live with that, thanks.
   Best,
   /rb

   • Edit

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

   

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

   1. At https://github.com/FortAwesome/Font-Awesome, 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!

   • Edit

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

    

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

    • Edit

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

    

    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. ??

    • Edit

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

    

    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
    missing.

    -Brett

    • Edit

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

    

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

    • Edit

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

    

    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?

    • Edit

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

    

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

    • Edit

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