Font Awesome icons Jekyll tag plugin
I wrote a simple Jekyll plugin that allows you to quickly add Font Awesome icons to your posts and pages. Feel free to copy the code snippet below to your _plugins
directory in your Jekyll site, or you can view the source gist here - font-awesome.rb.
- Simplest usage looks like this:
{% icon fa-camera-retro %}
- You can also add sizes:
{% icon fa-camera-retro fa-2x %}
- Or set fixed width:
{% icon fa-camera-retro fa-fw %}
- Or apply spinning:
{% fa-spinner fa-spin %}
- Or apply rotating:
{% fa-shield fa-rotate-90 %}
The only prerequisite for using this is that you have a link to the font-awesome stylesheet somewhere on your site. If you don’t want to host the file locally, you can grab it from the netdna CDN:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
| module Jekyll
class FontAwesomeTag < Liquid::Tag
def render(context)
if tag_contents = determine_arguments(@markup.strip)
icon_class, icon_extra = tag_contents[0], tag_contents[1]
icon_tag(icon_class, icon_extra)
else
raise ArgumentError.new <<-eos
Syntax error in tag 'icon' while parsing the following markup:
#{@markup}
Valid syntax:
for icons: <i class="fa fa-camera-retro"></i>
for icons with size/spin/rotate: <i class="fa fa-camera-retro fa-lg"></i>
eos
end
end
private
def determine_arguments(input)
matched = input.match(/\A(\S+) ?(\S+)?\Z/)
[matched[1].to_s.strip, matched[2].to_s.strip] if matched && matched.length >= 3
end
def icon_tag(icon_class, icon_extra = nil)
if icon_extra.empty?
"<i class=\"fa #{icon_class}\"></i>"
else
"<i class=\"fa #{icon_class} #{icon_extra}\"></i>"
end
end
end
end
Liquid::Template.register_tag('icon', Jekyll::FontAwesomeTag)
|