Font-awesome: Repeated Icons Throughout Page (maruku jekyll github)

[RichardLitt]

I'm not sure exactly the terminology to describe this, but here goes.

I insert the html for <i class="icon-wrench"></i> (or any icon) once in the html. I'm running this on Twitter Bootstrap and Jekyll Bootstrap for Github, so when I run the jekyll server and check it on my localhost, the html has changed to <i class="icon-wrench" />. However, the icon then appears multiple times throughout the page (but not in the source code), basically inside almost every div. It doesn't appear to be regular, which confused me - it doesn't occur in ever div, and I've no idea why.

I've gotten around it using the css :before option, but it's not ideal. Any ideas?

Not sure if this is proper etiquette, but here's a screenshot of my site so you get the idea: http://cl.ly/image/0W1y2S1R1m27

[RichardLitt]

Hmm. Nope, that's not it. I tried doing <i class="icon-coffee" />, too, and it had the same problem. Weirdly, it would cut out the entire line of code, as well, if it was text - it just didn't appear on the site. I'm not sure if this is just me or not.

[tagliala]

is your blog hosted somewhere?

[RichardLitt]

Yep. richardlitt.github.io. Hosted on a webfaction server.

Edit: Forgot I moved it. Clearly hosted on Github Pages.

[tagliala]

We have a twitter bootstrap jekyll blog and we are not experiencing issues with FA.

I noticed that you are not using the default method to display icons:

<div class="title" id="projects">
  Projects
</div>

fontawesome's default is:

<div class="title" id="projects">
  <i class="icon-wrench"></i>
  Projects
</div>

(without hacked div #project style)...

Are you doing this because of the repeating icons? Can you please provide a page which has this issue?

[RichardLitt]

That's my workaround at the moment. It's not ideal.

Here's a page with an example: http://www.burntfen.com/plans.html
Raw here: https://raw.github.com/RichardLitt/richardlitt.github.com/master/plans.md

Thanks.

[davegandy]

So you're using markdown. If you look at the code for that page, it's displaying an icon everywhere the HTML has placed an icon. So Font Awesome is working correctly.

Could this be something to do with how your markdown engine is processing bare HTML in the middle of your markdown?

[RichardLitt]

Ah! You're right. I assumed it was some FA bug.

It's a problem with Github's use of Maruku. Cf. https://github.com/middleman/middleman/issues/832

The temporary fix is to include a new line between the tags:

<i class='icon'> 
</i>.

Fixed.

[davegandy]

Good to know. Font Awesome's new blog (http://blog.fontawesome.io) is using Jekyll and Markdown, so I suspect I would have run into this myself. Thanks for helping to track this down!