You are here: Home / Documentation / How To's / How to add FontAwesome to plone

How to add FontAwesome to plone

by ledwell published Nov 20, 2013 02:27 PM, last modified Aug 16, 2016 10:49 AM
Show you how to add FontAwesome to plone without having to install a product or having to restart your server.

Yes, I know theres a really nice product for this located here.

 http://plone.org/products/collective.fontawesome 

But it requires that you have access to your server. I want to be able to add Font Awesome without having to hassle my server admin. So heres how I did it.

  • Download Font Awesome http://fontawesome.io/
  • In the ZMI go to "Portal_skins" - "custom". Create a folder called "font-awesome" then upload all those files and folders you downloaded. I uploaded them one at a time but you might have a better more expedient method. They should have the same structure as what you downloaded. So if theres a css file inside a "font" folder then make sure you create a "font" folder and add the css file inside it. While this seems time consuming it took me more time trying to figure out a different method to upload than to just upload them one at a time.
  • You now need to register the css file. In the ZMI on the root level of the site choose "portal_css (Registry of CSS files)"
  • At the bottom add this path into the ID/URL 
    • font-awesome/css/font-awesome.css
  • choose "Replace Relative Paths in URL() Statements with Absolute Paths" checkbox
  • Make "Render Type": link
That should be it.. then you can use your css to add the icons to you heading or what ever. That code should look something like.
#myIDHere:before {
    font-family: 'FontAwesome';
    content:"\f040";
    float:left;
}
You can find all the font icons from font awesome here http://fontawesome.io/icons/
Navigation