0

I have created a sub theme of Open Framework and everything seems fine, except for the Font Awesome feature. I add the following HTML in a block, but no icon shows up.

<i class="fa fa-facebook-square"></i>

Is there something I need to do in order to enable Font Awesome?

Edit: I can see the following in the source of my page, and I have verified that the path to font-awesome.css is valid.

<style type="text/css" media="all">@import url("http://www.example.com/sites/all/themes/open_framework/bootstrap/css/bootstrap.min.css?n2r8cn");
@import url("http://www.example.com/sites/all/themes/open_framework/bootstrap/css/bootstrap-responsive.min.css?n2r8cn");
@import url("http://www.example.com/sites/all/themes/open_framework/fontawesome/css/font-awesome.min.css?n2r8cn");
@import url("http://www.example.com/sites/all/themes/open_framework/css/open_framework.css?n2r8cn");
@import url("http://www.example.com/sites/all/themes/open_framework/css/ie.css?n2r8cn");
@import url("http://www.example.com/sites/all/themes/open_framework_triangle/css/frontpage.css?n2r8cn");
@import url("http://www.example.com/sites/all/themes/open_framework_triangle/css/views.css?n2r8cn");</style>
Improve this question

2 Answers 2

Reset to default
1

Your html is perfect - I think you probably just need to include the font-awesome.css library file itself.

There are a few ways to do this. I usually just include this in my pages <head> section:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

But some people prefer to actually download the font-awesome.css from fontawesome.com, place it in their theme folder and point to that.

Improve this answer
3
  • Thanks. The CSS file is included as expected. I see no errors in the console.
    – vegemite4me
    Commented Mar 21, 2014 at 18:03
  • 1
    Could you possibly have an older version of font-awesome.css? Somewhere in the 3.x.x releases they changed from an .icon syntax to the .fa syntax they use today.
    – Anne Bonham
    Commented Mar 21, 2014 at 20:40
  • Spot on, I was mistakenly using v4 names. Thank you.
    – vegemite4me
    Commented Mar 21, 2014 at 21:38
1

The Drupal 8 way of attaching an external library is by manipulating the THEMENAME.libraries.yml that lives on the root of your custom theme or subtheme. You can add a call for that library like this:

fontawesome:
  version: VERSION
  css:
    component:
      //use.fontawesome.com/releases/v5.1.0/css/all.css: {}

Where "//use.fontawesome.com/releases/v5.1.0/css/all.css" is the path for the library on Font Awesome's CDN.

Also, you have to update your base theme configuration file (THEMENAME.info.yml) in order to add a pointer for that specific library you have just added:

libraries:
  - THEMENAME/font-awesome

That is it... Clean the cache and enjoy!

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.