Enable Font Awesome icons

[paulvickers]

The PDF uses text tags instead of fontawesome icons for admonitions, even if you add -a icons=font to the command line. Any hints?

[mojavelinux]

I haven't finished implementing support for Font Awesome yet, but the precursor materials are all there. Here are the steps to complete it:

1. Add the FontAwesome ttf to the data/fonts folder along with the license file (like other fonts)
2. Uncomment FontAwesome in the theme file, data/themes/default-theme.yml
3. Check the value of the icons attribute in the render_admonition_node method and write text in the FontAwesome font, using the unicode character that we decide to map to the admonition name
4. Adjust the positioning, size and color of the unicode character

I'm not sure how soon I can get to it, but if you take a shot, I'd certainly be there to help out.

[paulvickers]

I'd already done 1 and 2, but not 3 or 4. Looking at the render_admonition_node method I can't see any mention of an icons attribute, but there is a #theme_font :admonition do block:

def render_admonition_node node
    # perfect case where we need to be able to merge margins (record size of last skipped space)
    move_down @theme.vertical_rhythm unless cursor == bounds.absolute_top
    keep_together do |box_height = nil|
      #theme_font :admonition do
        label = node.caption.upcase
        label_width = width_of label
        indent @theme.horizontal_rhythm, @theme.horizontal_rhythm do
          if box_height
            float do
              bounding_box [0, cursor], width: label_width + @theme.horizontal_rhythm, height: box_height do
                prose label, valign: :center, style: :bold, line_height: 1, final_gap: false
                #line_metrics = calc_line_metrics @theme.base_line_height
                #formatted_text_box [text: label],
                #    at: [0, cursor - line_metrics.shift],
                #    style: :bold,
                #    valign: :center,
                #    leading: line_metrics.leading,
                #    final_gap: line_metrics.final_gap
                stroke_vertical_rule @theme.admonition_border_color, at: bounds.width
              end
            end
          end
          indent label_width + @theme.horizontal_rhythm * 2 do
            #caption node
            if node.title?
              caption node.title
              # minor hack to make title in this location look right
              #move_up @theme.caption_margin_inside
            end
            render_node_content node
            # FIXME we need to move up to the content, not just vertical_rhythm
            move_up @theme.vertical_rhythm
          end
        end
      #end
    end
    move_down @theme.vertical_rhythm * 1.5
  end

I tried uncommenting the #theme_font :admonition do and its associated end but I still get text instead of icons.

[mojavelinux]

I hadn't yet added the logic to check for the font attribute value. You can see an example in the html5 converter:

https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor/converter/html5.rb#L326

[jessedoyle]

@mojavelinux: I'm not sure on your policy/opinion about dependencies, but I recently made a Prawn extension for rendering FontAwesome icons to a document.

Prawn::Icon provides a simple API to render and style icons within Prawn documents. The extension also takes care of providing necessary .ttf files.

Sorry for the shameless self-promotion - my intentions are to help the community.

[mojavelinux]

Cool @jessedoyle! That could definitely help us solve this issue. I'll definitely look into it.

[jninja]

+1

[wimdeblauwe]

+1

[jessedoyle]

Hi guys, I submitted pull request #90 that implements icon-based admonitions. Feel free to use it as a starting point!

[mojavelinux]

Thanks @jessedoyle! I'm hoping I'll be able to look at this soon.

[jessedoyle]

Awesome @mojavelinux! I'm going to be away for a couple of weeks so leave me a message if you have questions or concerns. I'll get to it as soon as I get back.

[mojavelinux]

👍 Thanks for getting the ball rolling!

[mojavelinux]

Thanks to @jessedoyle, this is now resolved.

As a follow-up, I'd like to make the icons names and colors optionally part of the theme. This is clearly something people are going to want to customize. I've filed an issue to track this improvement. See #121.

[mojavelinux]

You shouldn't need to do anything special to enable this. As you've figured out, the prawn-icon gem provides and loads the necessary fonts.

Can you try to generate the examples/chronicles-example.adoc document in the repository and see if icons work there. That will tell us whether it's an issue with your environment or your document.

[sagarbehere]

@mojavelinux Thanks for the prompt response. It works now.

The issue was that I'm very new to asciidoctor and didn't realize that there should be :icons: font at the top of the document. When I added that, it works :)

[mojavelinux]

👍