Question

I have this simple html file that displays the thumbs down icon using font awesome.

<html>
  <script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
  <script>
    WebFont.load({
      custom: {
      families: ['FontAwesome'],
      urls : ['//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css']
    },
    fontloading: function(familyName, fvd) {},
    fontactive: function(familyName, fvd) {},
    fontinactive: function(familyName, fvd) {
    }});
  </script>
  <style type="text/css">
  html{
    background-color:black;
    color:green;
  }

  .thumb_down:before {
      content:"";
      font-family: FontAwesome;
      color: #ffffff;
  }

  </style>

  <body>
    <div class="thumb_down">I am here! </div>
  </body>
</html>  

Working fiddle here

Now when I try hosing this on my local machine using a Python SimpleHTTPServer, my font is not rendered properly. I get this output

python -m SimpleHTTPServer

font_awesome_python

But when I host the same using a php server, I get the correct result as shown in the fiddle.

php -S localhost:9000

Any idea if this is a limitation of a python Simple HTTP Server?

Was it helpful?

Solution

It's probably the encoding. PHP is probably adding a header and python is not. If you add this after your <html> tag (like jsfiddle does) it will probably work

<head>
    <meta charset="utf-8"> 
</head>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top