Font-Awesome not loading font, only loading css

2
votes

I have a static website and I tried adding font-awesome. I already have bootstrap and jquery.

On firefox it displays a weird symbol, on chrome it displays nothing. Resources shows the font-awesome css. But it does not show the fonts. Resources -> fonts -> does not contain a fontawesome font. I looked at the directory structure/filenames and it checks out.

<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<link href="amara.css" rel="stylesheet">
<link rel="stylesheet" href="f-a/css/font-awesome.min.css">



  <ul class="nav navbar-nav pull-right">
    <li> <i class="fa fa-twitter"></i>s</li>
  </ul>

Only error that I get is : 

event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.10.2.js:5374

Does anyone know what could possibly be the issue?

2
htmlcsstwitter-bootstrapfont-awesome
What if you remove the s in the i tag? - vonUbisch
still doesn't work after I remove s. Also it is hosted locally jake - bezzoon
Are you sure all CSS has loaded correctly? They seem to be coming from everywhere. - vonUbisch
try using font awesome's copy. put <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> in your head, remove your local version and see if that works. - jakealbaugh
I wish. It is just static html. No framework, no language, just browser interpreted. - bezzoon

2 Answers

3
votes

It is bootstrap stylesheet that is floating right and adding margin to it...

I just created this fiddle to show you what i mean

http://jsfiddle.net/fj5vj/2/

now if you add in some styles to override bootstrap you will see it now

http://jsfiddle.net/fj5vj/1/

 .pull-right {float:none !important}
 .navbar-nav {margin:0 !important}

And the last fiddle i removed the booptstrap style sheet just so you can see it

http://jsfiddle.net/fj5vj/3/

1
votes

the following should work locally in chrome (floated to upper right):

<html>
<head>
  <title>test</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
 <ul class="nav navbar-nav pull-right">
    <li> <i class="fa fa-twitter"></i>s</li>
  </ul>
</body>
</html>

without the http: it won't work locally:

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