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">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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)
to top

Tags

Archives