Twitter Bootstrap Question posted in

Twitter bootstrap – Font awsome icons not showing within jade templates

I’m using jade for templating within my node.js/express app. but when i try to using font awesome the icons don’t show, only list bullets. I’ve tried all methods i’ve found by search engine. such as fa.fa-globe issue.
here’s is the code taken from the footer.jade

 span This is some other footer stuff.
    ul
      li.fa.fa-google-plus
        a(href='#')
        i.fa.fa-facebook
      li
        a(href='#')
        i.fa.fa-lg.fa-twitter
      li
        a(href='#')
        i.fa.fa-lg.fa-google-plus
      li
        a(href='#') 
        span.fa.fa-lg.fa-linkedin
 span and some more footer stuff.

As you can see above there are various methods i’ve tried, i, span and classes

And my layout.jade is as follows:

doctype html
html
  head
    title= title
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    link(href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/darkly/bootstrap.css', rel='stylesheet', media='screen')
    link(href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  include ./header.jade
  body(style="padding-bottom:10rem;")
    block content

  script(src='http://code.jquery.com/jquery.js')
  script(src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js')

thanks

Tags:

2

Answers


  1. 0

    The main issue is that you’re missing the rel='stylesheet' attribute for the font-awesome <link>. That will get the font-awesome icons working.

    However if you’re trying to get the icons to replace the bullets in the list, you’ll need to tweak your footer’s list items as shown on the font-awesome examples page. For example:

    span Hello world
  ul.fa-ul
    li
      i.fa-li.fa.fa-facebook
      a(href='#') Facebook
    li
      i.fa-li.fa.fa-lg.fa-twitter
      a(href='#') Twitter
    li
      i.fa-li.fa.fa-lg.fa-google-plus
      a(href='#') Google+
    li
      i.fa-li.fa.fa-lg.fa-linkedin
      a(href='#') LinkedIn
    Login or Signup to reply.
  2. 0

    If you’re seeing an empty symbol where the icon should be, you may need to add encoding to your layout head:

    meta(charset="utf-8")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search